您的位置：首页 > Web前端 > CSS

【css技术指南笔记】第六章 导航菜单

2015-04-10 00:00 441 查看 
<!DOCCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<style type="text/css">
.multi-drop-menu{
float: left;
}
.multi-drop-menu *{
margin: 0;
padding: 0;
}
.multi-drop-menu li{
list-style-type: none;
position: relative;
}
.multi-drop-menu a{
display: block;
background: #eee;
padding: 3px;
border: 1px solid #ffe;
color: #aaa;
text-decoration: none;
}
/* .multi-drop-menu a:hover{
background: #fff;
}*/
.multi-drop-menu li{
float: left;
}

.multi-drop-menu li ul{
display: none;
position: absolute;
/*display: block;*/
left: 0;
top: 100%;
}
.multi-drop-menu li ul li{
float: none;
}
.multi-drop-menu li:hover>ul{
display: block;
}

.multi-drop-menu li li ul{
left: 100%;
top: 0;
}
.multi-drop-menu li:hover > a{
background: #fff;
}
</style>
</head>
<body>
<nav>
<ul class="multi-drop-menu">
<li><a href="#">LL1</a></li>
<li><a href="#">LL2</a></li>
<li>
<a href="#">LL3</a>
<ul>
<li><a href="#">LL3LL1</a></li>
<li>
<a href="#">LL3LL2</a>
<ul>
<li><a href="#">1111</a></li>
<li><a href="#">3333</a></li>
</ul>
</li>
<li><a href="#">LL3LL3</a></li>
</ul>
</li>
<li><a href="#">LL4</a></li>
</ul>
</nav>
</body>
</html>




记录实现的下拉导航
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航