html里面有一个下拉导航，很多时候都有用到，今天分享一个下拉导航的样式代码，当然，下拉导航的样式有好几种实现方式，废话不多说，直接上代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>下拉导航</title>
<style>
body {
width: 95%;
margin: 0 auto;
background:red;
}
#header {
height: 50px;
width: 95%;
}
#nav {
position: absolute; /*菜单绝对定位*/
}
#nav > li {
list-style-type: none; /*去掉第一层li里面的符号*/
float: left; /*将第一层的li横向摆放*/
width: 100px; /*设置宽度*/
font-size: 30px; /*字体大小*/
background-color: #16b6fc; /*背景颜色*/
color: white; /*字体颜色*/
}
#nav li > ul > li {
list-style-type: none; /*去掉第二层li里面的符号*/
font-size: 15px; /*字体大小*/
padding-top: 8px; /*设置上间距*/
padding-bottom: 8px; /*设置下间距*/
}
#nav li ul {
margin-left: 0px; /*将第二层的ul都移到最左边*/
padding-left: 0px; /*将第二层的ul都移到最左边*/
display: none; /*隐藏ul内容，隐藏子菜单内容*/
}
#nav > li:hover ul { /*鼠标放在主菜单上，子菜单会显示出来*/
display: block;
}
#nav > li > ul > li:hover { /*鼠标放在子菜单上，了菜单的背景和字体颜色会改变*/
background-color: white;
color: black;
}
#content {
clear: both;
padding-left: 40px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="header">
<ul id="nav">
<li>menu1
<ul>
<li>menu11</li>
<li>menu12</li>
<li>menu13</li>
</ul>
</li>
<li>menu2
<ul>
<li>menu21</li>
<li>menu22</li>
<li>menu23</li>
</ul>
</li>
<li>menu3
<ul>
<li>menu31</li>
<li>menu32</li>
<li>menu33</li>
</ul>
</li>
</ul>
</div>
<div id="content">
<h1>My Page</h1>
<p>点击测试下拉导航吧!!!</p>
</div>
</div>
</form>
</body>
</html>
总结要点：HTML下拉要注意层级结构，其次是要对主导航的无序列表ul设置绝对定位，不过，不用定位也能实现。
发表评论 取消回复