html - 将子菜单列表添加到 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;
}

Answer 2

只是在 css 中添加了一些东西

.select_sub ul li {
    position: relative;
}

.nav .current .sub li:hover ul {
    display: inline;
}

.select_sub ul ul {
    position: absolute;
    bottom: -28px;
    left: 0;
    background: #999;
    min-width: 140px;
    text-align: left;
    display: none;
}

.select_sub ul ul li {
    float: none;
}

这是更新的小提琴

http://jsfiddle.net/vamsikrishna981/WnAHk/

Answer 3

试试这个：在“子子项”中添加子菜单的子项

<li class="sub_show">
   <a href="#nogo">Salisbury Cathedral</a>
     <!--child -->
      <ul class="sub-child">
           <li><a href="#"> #1 </a></li>
           <li><a href="#"> #2 </a></li>
      </ul>
</li>

sub-child 的 css 样式：

li.sub_show .sub-child {
   display: none;
}

li.sub_show:hover .sub-child {
    display: block;
    list-style: none;
    width: 100px;
}
li.sub_show:hover .sub-child a {
    width: 100px;
    height: 30px;
}

看到运行这个演示