css做导航栏伸缩菜单

做伸缩菜单是个既简单又很细致的工作，网上没有非常好的范本，自己写经常会丢了一个或几个设置导致出问题，今天自己做一个模版，方便自己以后使用。

此菜单为一级菜单横向布置，其他机菜单纵向布置，理论可以延伸无限级只要屏幕够大。

css代码

*{margin: 0;padding: 0;}/*消除间隙，否则二级菜单不能与一级菜单对齐*/
.main{margin: 0 auto;width: 1024px;}/*水平居中*/
.nav{height: 30px;/*固定导航栏高度*/
position:relative;/*缺少这行代码导航栏可能会被其他代码遮盖*/
z-index: 100;/*z轴优先级，缺少这行代码导航栏可能会被其他代码遮盖*/}
.nav *{ height:30px;/*缺少这行代码会导致二级菜单弹出时影响其他内容（正文内容）位置*/ }
.nav ul{list-style: none;/*取消ul，li式样，不需要再设置li式样*/}
.nav>ul>li{float: left;/*仅1级菜单横向化处理*/
width:120px;/*好像可以不设，但为了防止奇葩浏览器bug暂留*/}
.nav>ul>li>ul>li ul li{left: 120px;position: relative;top: -30px;/*三级菜单和三级菜单出现在上级菜单项的右侧*/}
.nav li ul{display: none;/*默认隐藏二级菜单*/}
.nav li:hover>ul{display: block;/*鼠标浮动到一级菜单时展开二级菜单*/}
.nav a{display: block;width: 120px;height: 30px;
/*保证a标签填满li否则会出现ie浏览器hover捕捉不到的bug。ie浏览器低版本hover对a标签有效对li无效*/
line-height: 30px; /*水平居中文字*/
background: #c0c0c0;/*菜单项背景颜色*/}
.nav a:hover{background: #ccc;/*鼠标经过时的菜单项背景颜色*/}

html代码

<div class="nav main" >
<ul>
<li><a href="#">index</a>
<ul>
<li><a href="#">-index</a></li>
<li><a href="#">-index</a></li>
<li><a href="#">-indexsssss</a>
<ul>
<li><a href="#">-index</a></li>
<li><a href="#">1indexsssss</a>
<ul>
<li><a href="#">1indexsssss</a></li>
<li><a href="#">2index</a></li>
<li><a href="#">3index</a></li>
<li><a href="#">4index</a></li>
<li><a href="#">5index</a></li>
<li><a href="#">6index1</a></li>
<li><a href="#">7index</a></li>
<li><a href="#">8index</a></li>
</ul>
</li>
<li><a href="#">2index</a></li>
<li><a href="#">3index</a></li>
<li><a href="#">4index</a></li>
<li><a href="#">5index</a></li>
<li><a href="#">6index1</a></li>
<li><a href="#">7index</a></li>
<li><a href="#">8index</a></li>
</ul>
</li>
<li><a href="#">-index</a></li>
<li><a href="#">-index</a></li>
</ul>
</li>
<li><a href="#">index</a>
<ul>
<li><a href="#">index</a></li>
<li><a href="#">index</a></li>
<li><a href="#">index</a></li>
</ul>
</li>
<li><a href="#">index</a>
<ul>
<li><a href="#">index</a></li>
<li><a href="#">index</a></li>
<li><a href="#">index</a></li>
</ul>
</li>
<li><a href="#">index</a>
<ul>
<li><a href="#">index</a></li>
<li><a href="#">index</a></li>
<li><a href="#">index</a></li>
</ul>
</li>
</ul>
</div>