HTML+CSS实现导航栏⼆级下拉菜单完整代码
⼯具是vs code
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
li{
list-style-type: none;
}
#menu {
width: 370px;
margin: 30px auto 0px;
height: 45px;
background-color: #030e11;
}
#menu li{
float: left;
width: 92px;
line-height:39px;
text-align: center;
position:relative;
border:none;
}
#menu li a {
font-size:16px; color: #e6f8e9;
display:block;
outline:0;
text-decoration:none;
}
#menu li:hover a {
color: #ff0000; /*导航栏⽂字颜⾊ */
}
#menu li:hover .dropdown_1column {
left:0px;
top:38px;
}
.dropdown_1column{ /* 下拉菜单边框颜⾊*/
margin: 0px auto;
float: left;
position: absolute;
left: -999em;
text-align: left;
border: 1px solid #066591;
border-top: none;
background: #F4F4F4;
width: 140px;
}
#menu li:hover div a { /* 下拉菜单⽂字颜⾊*/
font-size:12px
;color:#444;
}
#menu li:hover div a:hover{color:#21910e;} /*下拉带单⿏标停留颜⾊*/
#menu li ul {
list-style:none;padding:10px 5px;
margin:0;
导航菜单
}
#menu li ul li {
font-size:12px;
line-height:26px;
position:relative;
padding:0;margin:0;
float:none;
text-align:left;
width:130px;
}
#menu li ul li:hover {
background:none;
border:none;padding:0;
margin:0;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li> <a href="" class="nodrop">⾸页</a></li>
<li><a href="" class="drop">最⽕下载站</a>
<div class="dropdown_1column">
<div class="col_1">
<ul class="simple">
<li><a href="">⽹站建设</a></li>
<li><a href="">导航条代码</a></li>
<li><a href="">电⼦商务</a></li>
</ul>
</div>
</div>
</li>
<li><a href="" class="nodrop"></a></li>
</ul>
</div>
</body>
</html>
3.CSS + ul li 去掉列表项前⾯的标记类型
例如：
ul.circle {list-style-type:none;}
ul.circle {list-style-type:circle;}
ul.square {list-style-type:square;}
ol.upper-roman {list-style-type:upper-roman;}
ol.lower-alpha {list-style-type:lower-alpha;}
4.CSS + ul li  竖着排列转成横向排列⽅法
5.  块级元素，背景⾊设置
6.⿏标放上去⼩⼿形状，字体颜⾊变化
7.⼆级菜单出现位置，⼆级菜单边框，⿏标放到⼆级菜单上，字体颜⾊变化

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。