CSS技巧分享：如何用css制作横排二级下拉菜单

2023-03-05 09:53:01html-css08

CSS技巧分享：如何用css制作横排二级下拉菜单,第1张

工具/材料

notepad++

浏览器

打开Notepad++，先输入个页面框架

<！DOCTYPE html>

<hade>

</hade>

<body>

</body>

框架好了，那么就该定义页面的title，关键词keyword，和描述description

<title>纯css二级导航下拉菜单</title>

这些内容只能在<head></head>中完成。

定义页面使用的css样式，也是需要在<head>里定义的。

* {

margin:0

padding:0

}

.jiao ul li a:hover{

color:#red

}

ul, li {

list-style:none

}

a {

text-decoration:none

}

.jiao {

border:5px solid #pink

border-right:none

overflow:hidden

float:left

margin:200px 0 0 600px

}

.jiao ul li ul li a {

border-right:solid

border-top:2px dotted #666

background:#black

}

.jiao>ul>li { float:left}

.jiao ul li a { width:150pxheight:80pxtext-align:centerline-height:100pxdisplay:blockborder-right:5px solid #redbackground:#redcolor:#red}

.jiao ul li ul { position:absolutedisplay:none}

.jiao ul li:hover ul{ display:block}

.jiao>ul>li>ul>li { float:none}

<!--nav>ul只选择nav下一级里面的ul元素

nav ul选择nav内所包含的所有ul元素

nav>ul比nav ul限定更严格，必须后面的元素只比前面的低一个级别。

这里根据你的需求来自己定义。

-->

</style>

添加一个DIV标签，在页面中划分出一个块来，用来显示。

div中所用的样式为刚才咱们声明的样式“jiao”这个盒子来描述

然后使用无序标签<ul>+样式<li>来实现模块。

<ul>

<ul>

<li><a href="#">搜狗输入法</a></li>

<li><a href="#">搜狗浏览器</a></li>

</ul>

</div>

放上全部的代码吧，可以参考一下啊，

<!DOCTYPE html >

<html xmlns="http://www.w3.org/1999/xhtml">//允许你通过一个网址来识别你的标记

<head>

<title>css实现下拉导航栏菜单</title>

* {

margin:0

padding:0

}

.jiao ul li a:hover{

color:#red

}

ul, li {

list-style:none

}

a {

text-decoration:none

}

.jiao {

border:5px solid #pink

border-right:none

overflow:hidden

float:left

margin:200px 0 0 600px

}

.jiao ul li ul li a {

border-right:solid

border-top:2px dotted #666

background:#black

}

.jiao>ul>li { float:left}

.jiao ul li a { width:150pxheight:80pxtext-align:centerline-height:100pxdisplay:blockborder-right:5px solid #redbackground:#redcolor:#red}

.jiao ul li ul { position:absolutedisplay:none}

.jiao ul li:hover ul{ display:block}

.jiao>ul>li>ul>li { float:none}

<!--nav>ul只选择nav下一级里面的ul元素

nav ul选择nav内所包含的所有ul元素

nav>ul比nav ul限定更严格，必须后面的元素只比前面的低一个级别。

这里根据你的需求来自己定义。

-->

</style>

</head>

<body>

<ul>

<ul>

<li><a href="#">搜狗输入法</a></li>

<li><a href="#">搜狗浏览器</a></li>

</ul>

</li>

</ul>

</div>

</body>

</html>

如果要添加更多的菜单，只需要后边继续添加<ul>/<li>即可

特别提示

写代码过程中一定要记得换行，开头留空，否则过后找东西，连你自己都不知道写的是什么。何谈从哪里找起？

这是我写的一个导航，你自己看吧。li并列应该定义其float属性为left。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

</HEAD>

<style>

body{

padding-top:200px

text-align:center

font-size:13px

}

#content{

margin:0 auto

text-align:left

width:720px

background:orange

background-color:black

}

ul{

margin-top:1px

list-style:none

}

#father li{

float:left

position:relative

margin-right:10px

width:120px

text-align:center

border:1px solid black

border-bottom:none

}

#father li a:link,#father li a:visited{

line-height:30px

color:darkred

font-weight:bold

}

#father li ul *{

float:none

margin-right:0px

padding:0

color:none

width:90px

background-color:orange

border:none

}

.child{

position:absolute

top:29px

right:0px

display:none

}

#father li ul li a:link,#father li ul li a:visited{

margin:1px

color:blue

text-decoration:none

font-weight:normal

line-height:20px

}

#father li ul li a:hover{

background-color:white

}

</style>

function showMenu(emt,id1,id2){

document.getElementById(id1).style.textDecoration = "none"

document.getElementById(id1).style.color = "white"

document.getElementById(id2).style.display = "block"

emt.style.backgroundColor = "orange"

emt.style.borderColor = "white"

}

function hiddenMenu(emt,id1,id2){

document.getElementById(id1).style.textDecoration = "underline"

document.getElementById(id1).style.color = "darkred"

document.getElementById(id2).style.display = "none"

emt.style.backgroundColor = "black"

emt.style.borderColor = "black"

}

</script>

<BODY>

</table>

<li><a href="#">使用中文字符</a></li>

<li><a href="#">你看可以吗</a></li>

</ul>

</li>

</ul>

</li>

<li><a href="#">JavaScript</a></li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

<div>

</BODY>

</HTML>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=" http://www.w3.org/1999/xhtml" ><head runat="server"> <title>使用JavaScript实现的tab</title> <style type="text/css"> /*设置超链接样式*/a{color: #5086a5 text-decoration: none font-size: 12px}a:hover{ color: #5086a5 text-decoration: underline font-size: 12px}a:visited{color: #5086a5 font-size: 12px }/*整个tab层居中，宽度为600px*/#tabDiv{width:600px margin:1em auto padding-bottom: 10px border-right: #b2c9d3 1px solid border-top: #b2c9d3 1px solid border-left: #b2c9d3 1px solid border-bottom: #b2c9d3 1px solid background: #ffffff}/*tab头的样式*/#tabsHead{ padding-left: 0pxheight: 26pxbackground-color: #e8f7fcfont-size: 1emmargin: 1px 0px 0pxcolor: #5086a5line-height: 26px}/*已选tab头（超链接）的样式*/.curtab{padding-top: 0px padding-right: 10px padding-bottom: 0px padding-left: 10px border-right: #b2c9d3 1px solid font-weight: bold float: left cursor: pointer background: #ffffff } /*未选tab头（超链接）的样式*/.tabs{border-right: #c1d8e0 1px solid padding-top: 0px padding-right: 10px padding-bottom: 0px padding-left: 10px font-weight: normal float: left cursor: pointer }p{font-size:9pt margin-left:20pt }</style> <script language="javascript" type="text/jscript">  </script></head><body> <form id="form1" runat="server">  <div id="tabDiv"><div id="tabsHead"><a class="curtab" id="tabs1" href="javascript:showTab('tabs1','tabContent1')">钗头凤</a><a class="tabs" id="tabs2" href="javascript:showTab('tabs2','tabContent2')">卜算子·咏梅</a></div><div id="tabContent1" style="display:block">

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：如何使用电脑打开蓝牙？

# 下一篇：C语言数组的查找函数