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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。