将子菜单列表添加到css水平子菜单

Question

我有一个子菜单的菜单

这是html

<div class="nav">
<div class="table">

<ul class="select"><li><a href="#nogo"><b>Home</b>
</a></li></ul>



<ul class="select"><li><a href="#nogo"><b>Joseph Turner</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="select_sub">
    <ul class="sub">
        <li><a href="#nogo">Fishermen at Sea</a></li>
        <li><a href="#nogo">The Shipwreck</a></li>
        <li><a href="#nogo">The Vale of Ashburnham</a></li>
        <li><a href="#nogo">Crossing the Brook</a></li>
    </ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>

<ul class="current"><li><a href="#nogo"><b>John Constable</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="select_sub show">
    <ul class="sub">
        <li><a href="#nogo">The Hay Wain</a></li>
        <li><a href="#nogo">Brighton Beach</a></li>
        <li><a href="#nogo">Malvern Hall</a></li>
        <li class="sub_show"><a href="#nogo">Salisbury Cathedral</a></li>
        <li><a href="#nogo">Weymouth Bay</a></li>
    </ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>


<ul class="select"><li><a href="#nogo"><b>Henri Matisse</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="select_sub">
    <ul class="sub">
        <li><a href="#nogo">The Girl with Green Eyes</a></li>
        <li><a href="#nogo">The Dream</a></li>
        <li><a href="#nogo">Woman in Blue</a></li>
        <li><a href="#nogo">The Yellow Dress</a></li>
        <li><a href="#nogo">The Piano Lesson</a></li>
    </ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>


<ul class="select"><li><a href="#nogo"><b>Paul Cezanne</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="select_sub">
    <ul class="sub">
        <li><a href="#nogo">The Large Bathers</a></li>
        <li><a href="#nogo">Onions and Bottles</a></li>
        <li><a href="#nogo">Mardi Gras</a></li>
        <li><a href="#nogo">Still Life</a></li>
        <li><a href="#nogo">Boy in a Red Waistcoat</a></li>
    </ul>
</div>

但是我想添加一个子菜单,John Constable -> Salisbury Cathedral like -> (#1 , #2 )如:

添加像这样的列表最简单的方法是什么？

这是jsfiddle

Answer 1

它比其他人更广泛,但我认为它满足了你的需求:http: //jsfiddle.net/P2kgN/5/

HTML代码:

<li class="sub_show"><a href="#nogo">Salisbury Cathedral</a>
<ul class="subChild">
   <li><a href="#"> #1 </a></li>
   <li><a href="#"> #2 </a></li>
</ul>

CSS代码:

.sub_show:hover .subChild{display:block}

.sub_show .subChild{
    display:none;
    list-style:none;    
    float:left;
    width:100%;
    clear:both;
    padding:0 !important;    
    background: #dbe5e6;
    background: -moz-linear-gradient(top,  #dbe5e6 1%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#dbe5e6), color-stop(100%,#ffffff));
    background: -webkit-linear-gradient(top,  #dbe5e6 1%,#ffffff 100%);
    background: -o-linear-gradient(top,  #dbe5e6 1%,#ffffff 100%);
    background: -ms-linear-gradient(top,  #dbe5e6 1%,#ffffff 100%);
    background: linear-gradient(to bottom,  #dbe5e6 1%,#ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dbe5e6', endColorstr='#ffffff',GradientType=0 );
}

.sub_show .subChild li{
    width:100%;
    cursor:pointer;    
}

.sub_show .subChild li a{
    cursor:pointer !important;
    display:block;width:100%;
    background:none !important;
    padding:0 !important;
    text-indent:10px;
    text-align:left;    
}

.sub_show .subChild li:hover a{
    color:#000 !important;
}