关于css制作多级导航菜单的问题

html-css08

关于css制作多级导航菜单的问题,第1张

要用到js，二级导航ul应该放在对应的菜单li里，然后定位放在原地，js里默认二级菜单的display：none，鼠标碰到大菜单的对应li就显示display：block，离开又恢复display：none。

这个很简单啊，

<div id="title">

<ul>

<li><a href="#">首页</a></li>

<li>

<a href="#">衬衫</a>

<ul>

<li><a href="#">长袖衬衫</a></li>

<li><a href="#">短袖衬衫</a></li>

<li><a href="#">无袖衬衫</a></li>

</ul>

</li>

<li>

<a href="#">裤子</a>

<ul>

<li><a href="#">休闲裤</a></li>

<li><a href="#">卡其裤</a></li>

<li><a href="#">牛仔裤</a></li>

</ul>

</li>

<li><a href="#">联系我们</a></li>

</ul>

</div>

css

#title{

margin:10px auto

width:800px

height:25px

border:1px solid black

}

#title ul{

margin:5px

}

#title ul li{

float:left

margin-right:14px

position:relative

z-index:100

}

#title ul li a{

display:block

padding:0 8px

background-color:white

font-weight:700

}

#title ul li a:hover{

background:none

color:white

}

#title ul li ul{

margin:0px

background-color:white

position:absolute

width:70px

display:none

}

#title ul li:hover ul{

margin:0px

background-color:white

position:absolute

width:70px

display:block

}

#title ul li ul li{

background-color:#88c366

border-bottom:1px solid #bbb

text-align:left

width:100%

}

 <style>

*{padding:0margin:0}

li,ol{list-style-type:none}

.nav{margin:20px}

li{width:120pxfloat:leftcursor:pointerheight:30pxline-height:30pxborder:1px solid redmargin:10px -1px 5px 10pxtext-align:center}

li ul{display:none}

li:hover ul{display:block}

  </style>

  <div class="nav">

<ul>

<li>首页

<ul>

<ol>首页</ol>

<ol>首页</ol>

<ol>首页</ol>

</ul>

</li>

<li>首页

<ul>

<ol>首页</ol>

<ol>首页</ol>

<ol>首页</ol>

</ul>

</li>

<li>首页

<ul>

<ol>首页</ol>

<ol>首页</ol>

<ol>首页</ol>

</ul>

</li>

</ul>

  </div>