首页 > 代码库 > 二级导航菜单

二级导航菜单

html:

<div id="nav"><ul><li class="first"><a href="#">Home</a></li><li><a href="#">About Me</a></li><li><a href="#">Portfolio</a><ul><li><a href="#">Web</a></li><li><a href="#">Print</a></li><li><a href="#">Photos</a></li></ul></li><li><a href="#">Contact Me</a></li></ul></div>

css:

#nav {font-family: arial, sans-serif;position: relative;width: 390px;height:56px;font-size:14px;color:#999;margin: 0 auto;}#nav ul {list-style-type: none;}#nav ul li {float: left;position: relative;}#nav ul li a {text-align: center;border-right:1px solid #e9e9e9;padding:20px;display:block;text-decoration:none;color:#999;}#nav ul li ul {display: none}#nav ul li:hover ul {display: block;position: absolute;}#nav ul li:hover ul li a {display:block;background:#12aeef;color:#ffffff;width: 110px;text-align: center;border-bottom: 1px solid #f2f2f2;border-right: none;}#nav ul li:hover ul li a:hover {background:#6dc7ec;color:#fff;}

 

二级导航菜单