代码
Html代码:
<div id="menu">
<ul>
<li><a href="#">菜单一</a>
<ul>
<li><a href="#">子项目</a></li>
<li><a href="#">子项目</a></li>
<li><a href="#">子项目</a></li>
<li><a href="#">子项目</a></li>
</ul>
</li>
<li><a href="#">菜单二</a>
<ul>
<li><a href="#">子项目</a></li>
<li><a href="#">子项目</a></li>
<li><a href="#">子项目</a></li>
<li><a href="#">子项目</a></li>
</ul>
</li>
<li><a href="#">菜单三</a>
<ul>
<li><a href="#">子项目</a></li>
<li><a href="#">子项目</a></li>
<li><a href="#">子项目</a></li>
<li><a href="#">子项目</a></li>
</ul>
</li>
<li><a href="#">菜单四</a>
<ul>
<li><a href="#">子项目</a></li>
<li><a href="#">子项目</a></li>
<li><a href="#">子项目</a></li>
<li><a href="#">子项目</a></li>
</ul>
</li>
<li><a href="#">菜单五</a>
<ul>
<li><a href="#">子项目</a></li>
<li><a href="#">子项目</a></li>
<li><a href="#">子项目</a></li>
<li><a href="#">子项目</a></li>
</ul>
</li>
<li><a href="#">菜单六</a>
<ul>
<li><a href="#">子项目</a></li>
<li><a href="#">子项目</a></li>
<li><a href="#">子项目</a></li>
<li><a href="#">子项目</a></li>
</ul>
</li>
</ul>
</div>
CSS代码:
a {
text-decoration: none;
color: #424242;
}
#menu {
width: 720px;
height: 20px;
margin: 0px auto;
border: 1px solid #999;
}
#menu ul {
margin: 0px;
padding: 0px;
list-style: none;
}
#menu ul li {
background: #06c;
height: 26px;
line-height: 26px;
text-align: center;
border-bottom: 1px solid #999;
position: relative;
width: 120px;
float: left;
}
a {
display: block;
font-size: 13px;
color: #fff;
}
a:hover {
color: #f00;
font-size: 14px;
}
#menu ul li ul {
display: none;
top: 26px;
width: 100px;
border: 1px solid #ccc;
border-bottom: none;
}
#menu ul li:hover ul {
display: block;
}
声明:
本文采用
BY-NC-SA
协议进行授权,如无注明均为原创,转载请注明转自
Eric · 梦曦
本文地址: 实例:横向二级导航菜单
本文地址: 实例:横向二级导航菜单