html,css向上菜单导航源码下载
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.menu {font-family: verdana, arial, sans-serif; width:500px; position:relative; font-size:11px; margin-top:500px; height:50px;}
.menu ul li{width:100px; height:100%; }
.menu ul li a{display:block; text-decoration:none; width:100%;
height:100%; text-align:left; color:#000; border:1px solid #fff;
border-width:0 1px 1px 0; background:#03F; line-height:50px; font-size:11px; text-align:center;}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; position:relative;}
.menu ul li ul {display: none;}
.menu ul li:hover a {color:#000; }
.menu ul li:hover ul {display:block; position:absolute; bottom:50px; left:0; background:#03F;}
.menu ul li:hover ul li a.hide {background:#03F; color:#000;}
.menu ul li:hover ul li {display:block; background:#03F; color:#000;width:100px; clear:both;}
.menu ul li ul li a{background:#03F;}
.menu ul li ul li a:hover{background:#fff;}
</style>
</head>
<body>
<div class="menu">
<ul>
<li>
<a class="hide" href="">首页1</a>
</li>
<li>
<a class="hide" href="">首页2</a>
<ul>
<li><a href="" >菜单1</a></li>
<li><a href="" >菜单2</a></li>
</ul>
</li>
<li>
<a class="hide" href="">首页3</a>
</li>
<li>
<a class="hide" href="">首页4</a>
<ul>
<li><a href="" >菜单1</a></li>
<li><a href="" >菜单2</a></li>
<li><a href="" >菜单2</a></li>
</ul>
</li>
<li>
<a class="hide" href="">首页5</a>
</li>
</ul>
</div>
</body>
</html>
正在加载评论...