标签：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <div id="container"> <ul class="nav clearfix"> <li> <a href=#>首页</a> <ul class="icons"> <li><a href=#>页面1</a></li> <li><a href=#>页面2</a></li> <li><a href=#>页面3</a></li> </ul> </li> <li><a href=#>关于</a></li> <li> <a href=#>下载</a> <ul class="icons"> <li><a href=#>下载1</a></li> <li><a href=#>下载2</a></li> </ul> </li> <li><a href=#>博客</a></li> </ul> </div> </body> </html>
*{margin:0;padding:0;} a{text-decoration: none;} ul{list-style:none;} body{background:#ccc;} #container{ text-align:center; padding:5px; } .clearfix{ content:‘‘; display:block; clear:both; } .nav{ display:inline-block; border:1px solid #ddd; border-right:none; } .nav li{ width:100px; padding:15px; text-align:center; line-height:15px; background-color:#fff; } .nav>li{ float:left; border-right:1px solid #ddd; position:relative; } .icons{ display:none; position:absolute; top:100%; left:0; margin-top:1px; } .nav>li:hover>.icons{ display:block; }
标签：
原文地址：http://www.cnblogs.com/duqiuFighting/p/4963186.html
