<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"content="IE=edge">
<link rel="stylesheet"type="text/css"href="12.css">
<meta name="viewport"content="width=device-width, initial-scale=1.0"> <title>⼆级导航栏</title>
</head>
<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="drop">软件类</a>
html下拉菜单的制作方法<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="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="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="">图解HTTP</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
css代码
li{
list-style-type: none;
}
#menu{
width: 740px;
margin: 30px auto 0px;
height: 45px;
background-color: #424242;
}
#menu li{
float: left;
width: 92px;
line-height:39px;
text-align: center;
position:relative;
border:none;
}
#menu li a{
font-size:16px;color: #F4F4F4;
display:block;
outline:0;
text-decoration:none;
}
#menu li:hover a{
color: #ff6700;/*导航栏⽂字颜⾊ */
}
#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 #424241;
border-top: none;
background: #F4F4F4;
width: 92px;
}
#menu li:hover div a{/* 下拉菜单⽂字颜⾊*/
font-size:12px
;color:#333;
}
#menu li:hover div a:hover{color:#ff6700;}/*下拉带单⿏标停留颜⾊*/
#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;
}

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