</ul>
</li>
<li>
<ul class=”hide”>
<li>第五栏</li><li>第五栏</li><li>第五栏</li>
</ul>
</li>
<li>
<ul class=”hide”>
<li>第六栏</li><li>第六栏</li><li>第六栏</li>
</ul>
</li>
</ul>
</div>
</div>
<div style=”width:400px; height:300px; background-color:red;”></div>
</body>
</html>
菜单栏示例二：
复制代码
<html>
<head>
<title>黄页地区列表</title>
<style type=”text/css”>
body {background:#ccc;color:#000;font: normal normal normal 12px/180% Tahoma, Arial, Helvetica, sans-serif, “宋体”;text-align:center;}
.nav {position: relative;background: url(/images/cnblogs_com/xugang/nav_bg.png) no-repeat 0 -36px;width:960px;height:36px;}
.navinner {background: url(/images/cnblogs_com/xugang/nav_bg.png) no-repeat 100% -72px;}
.navlist {height: 36px;line-height: 36px;overflow: hidden;margin: 0 10px;background: url(/images/cnblogs_com/xugang/nav_bg.png) repeat-x 0 0;}
.nav li {float: left;display: inline;margin: 0 0 0 -2px;padding: 0 4px 0 6px;background: url(/images/cnblogs_com/xugang/nav_bg.png) no-repeat 0 -108px;}
.nav a {display: block;width: 102px;text-align: center;font-size: 120%; text-decoration:none;}
.nav a:link, .nav a:visited {color: #fff;text-decoration:none;}
.nav a:hover, .nav a:active {color: #fff;font-weight: bold;background: url(/images/cnblogs_com/xugang/nav_bg.png) no-repeat 50% -144px;text-decoration:none;}
</style>
</head>
<body>
<div class=”nav”>
<div class=”navinner”>
<ul class=”navlist”>
<li><a%20href=”<a%20href=”https://www.jb51.net/”>https://www.jb51.net/</a>” title=”首页”>首页</a></li>
<li><a%20href=”<a%20href=”https://www.jb51.net/cat.html”>https://www.jb51.net/cat.html</a>” title=”分类列表” rel=”nofollow”>分类列表</a></li>
<li><a%20href=”<a%20href=”https://www.jb51.net/loc.html”>https://www.jb51.net/loc.html</a>” title=”地区列表” rel=”nofollow”>地区列表</a></li>
<li><a%20href=”<a%20href=”https://www.jb51.net/trade.html”>https://www.jb51.net/trade.html</a>” title=”供求商机” rel=”nofollow”>供求商机</a></li>
<li><a%20href=”<a%20href=”https://www.jb51.net/news.html”>https://www.jb51.net/news.html</a>” title=”行业新闻” rel=”nofollow”>行业新闻</a></li>
