【技术】导航

<!doctype html>

<html>
　　<head>
　　　　<meta charset="UTF-8">
　　　　<title>test8</title>
　　　　<script src="js/jquery-1.11.1.min.js"></script>
　　　　<style>
　　　　*{padding: 0px;margin: 0;}
　　　　body{padding: 40px;}
　　　　a{text-decoration: none;color: #fff;}
　　　　.nav{
　　　　　　width: 980px;
　　　　　　height: 30px;
　　　　　　background: #666;
　　　　　　margin: 0 auto;
　　　　}
　　　　.nav ul li{
　　　　　　float: left;
　　　　　　list-style-type: none;
　　　　　　color: #fff;
　　　　　　line-height: 30px;
　　　　　　width: 100px;
　　　　　　margin-right: 10px;
　　　　　　text-align: center;
　　　　}
　　　　.nav ul li>a:hover{
　　　　　　background: #333;
　　　　　　display: block;
　　　　}
　　　　.sub_nav{
　　　　　　width: 100px;
　　　　　　background: #666;
　　　　　　display:none;
　　　　}
　　　　.sub_nav a{
　　　　　　display: block;
　　　　}
　　　　.sub_nav a:hover{
　　　　　　background: #333;
　　　　}
　　　　</style>
　　</head>
<body>

　　　　　　</li>
　　　　　　<li>

　　　　　　</li>
　　　　　　<li>

　　　　　　</li>
　　　　　　<li>

　　　　　　</li>
　　　　　　<li>

　　　　　　</li>
　　　　</ul>
　　</div>

</body>

　　　　function(){
　　　　　　$(this).find('.sub_nav').stop().slideDown();
　　　　},

　　　　function(){
　　　　　　$(this).find('.sub_nav').stop().slideUp();

　　　　});
　　})
</script>

</html>

使二级菜单在其它内容之上：

1. li{position: relative;}

2. .sub_nav{position: absolute; z-index: 100;}

posted @ 2014-09-13 17:56 ybingbing_1213 Views(192) Comments(0) 收藏举报

刷新页面返回顶部

ybingbing_1213

【技术】导航

公告