add submenu list to css horizontal submenu

Question

I have a menu with submenu like

enter image description here

This is the 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>

However I would like to add a sub menu on John Constable -> Salisbury Cathedral like -> (#1 , #2 ) like: enter image description here

what would be the easiest way to add a list like that?

Here is the jsfiddle

Pablo S G Pacheco · Accepted Answer · 2013-06-27 04:42:27Z

It's a bit more extensive than others did but i think it fulfills your needs like you want: http://jsfiddle.net/P2kgN/5/

HTML code:

<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 code:

.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;
}

Maxi Baez · Accepted Answer · 2013-06-27 03:44:10Z

1

Try this : Add the childs of your sub menu in "sub-child"

<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>

the css style of sub-child :

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;
}

see runing this demo

answered Jun 27, 2013 at 3:44

Maxi Baez

5785 silver badges14 bronze badges

Comments

Tepken Vannkorn · Accepted Answer · 2013-06-27 03:51:49Z

1

just added few things in 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;
}

here's the updated fiddle

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

edited Jun 27, 2013 at 3:51

Tepken Vannkorn

9,72514 gold badges63 silver badges86 bronze badges

answered Jun 27, 2013 at 3:34

Vamsikrishna

1763 silver badges16 bronze badges

Collectives™ on Stack Overflow

add submenu list to css horizontal submenu

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related