Question

css中ul li菜单。。。。。。

大家看下这张图片，看怎样才能实现这种效果，
> 就是先用ul li 做一个横向菜单，然后再在每一个小项中加入另一个ul li 实现图片中的效果。。。。。。

Answer 1

<!-- 简单实现了下，样式什么的自己调整吧 -->
<style type="text/css">
.menu_h,.menu_v,.menu_h li,.menu_v li{
margin:0;
padding:0;
line-height:21px;
font-size:12px;
list-style-type:none;
}
.menu_h a,.menu_v a{
display:block;
line-height:21px;
padding:0 10px;
}
.menu_h li{
float:left;
background-color:#eee;
}
.menu_v li{
float:none;
}
.sub_menu_off .menu_v{
display:none;
}
.sub_menu_on .menu_v{
display:block;
}
</style>
<div class="navi">
<ul class="menu_h">
<li onmouseover="this.className='sub_menu_on';" onmouseout="this.className='sub_menu_off';" class="sub_menu_off">
<a href="#">111</a>
<ul class="menu_v">
<li><a href="#">111</a></li>
<li><a href="#">111</a></li>
<li><a href="#">111</a></li>
</ul>
</li>
<li onmouseover="this.className='sub_menu_on';" onmouseout="this.className='sub_menu_off';" class="sub_menu_off">
<a href="#">222</a>
<ul class="menu_v">
<li><a href="#">222</a></li>
<li><a href="#">222</a></li>
<li><a href="#">222</a></li>
</ul>
</li>
<li onmouseover="this.className='sub_menu_on';" onmouseout="this.className='sub_menu_off';" class="sub_menu_off">
<a href="#">333</a>
<ul class="menu_v">
<li><a href="#">333</a></li>
<li><a href="#">333</a></li>
<li><a href="#">333</a></li>
</ul>
</li>
</ul>
</div>

Answer 2

<!--
简单实现了下，样式什么的自己调整吧
-->
<style
type="text/css">
.menu_h,.menu_v,.menu_h
li,.menu_v
li{
margin:0;
padding:0;
line-height:21px;
font-size:12px;
list-style-type:none;
}
.menu_h
a,.menu_v
a{
display:block;
line-height:21px;
padding:0
10px;
}
.menu_h
li{
float:left;
background-color:#eee;
}
.menu_v
li{
float:none;
}
.sub_menu_off
.menu_v{
display:none;
}
.sub_menu_on
.menu_v{
display:block;
}
</style>
<div
class="navi">
<ul
class="menu_h">
<li
onmouseover="this.className='sub_menu_on';"
onmouseout="this.className='sub_menu_off';"
class="sub_menu_off">
<a
href="#">111</a>
<ul
class="menu_v">
<li><a
href="#">111</a></li>
<li><a
href="#">111</a></li>
<li><a
href="#">111</a></li>
</ul>
</li>
<li
onmouseover="this.className='sub_menu_on';"
onmouseout="this.className='sub_menu_off';"
class="sub_menu_off">
<a
href="#">222</a>
<ul
class="menu_v">
<li><a
href="#">222</a></li>
<li><a
href="#">222</a></li>
<li><a
href="#">222</a></li>
</ul>
</li>
<li
onmouseover="this.className='sub_menu_on';"
onmouseout="this.className='sub_menu_off';"
class="sub_menu_off">
<a
href="#">333</a>
<ul
class="menu_v">
<li><a
href="#">333</a></li>
<li><a
href="#">333</a></li>
<li><a
href="#">333</a></li>
</ul>
</li>
</ul>
</div>