将子子菜单添加到带有子菜单的 CSS 菜单

Question

I have a CSS manu that I am using with sub menus. I was wondering how I would go about adding a sub-submenu to it. For example, I hover over the main menu item and the submenu pops up, then I hover over the submenu item and another submenu pops up. Here is the JS Fiddle that I am using now:

http://jsfiddle.net/PrinceofVegas/Dg3yQ/4/

Here is the CSS I am using:

.menu{
    border:none;
    border:0px;
    margin:0px;
    padding:0px;
    font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
    font-size:18px;
    font-weight:bold;
}
.menu ul{
    background:#006633;
    height:35px;
    list-style:none;
    margin:0;
    padding:0;
}
.menu li{
    float:left;
    padding:0px;
}
.menu li a{
    background:#006633 url("../images/seperator.gif") bottom right no-repeat;
    color:#ffffff;
    display:block;
    font-weight:normal;
    line-height:35px;
    margin:0px;
    padding:0px 25px;
    text-align:center;
    text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
    background: #003f20 url("../images/hover.gif") bottom center no-repeat;
    color:#FFFFFF;
    text-decoration:none;
}
.menu li ul{
    background:#006633;
    display:none;
    height:auto;
    padding:0px;
    margin:0px;
    border:0px;
    position:absolute;
    width:225px;
    z-index:200;
    /*top:1em;
    /*left:0;*/
}
.menu li:hover ul{
    display:block;
}
.menu li li {
    background:url('../images/sub_sep.gif') bottom left no-repeat;
    display:block;
    float:none;
    margin:0px;
    padding:0px;
    width:225px;
}
.menu li:hover li a{
    background:none;
}
.menu li ul a{
    display:block;
    height:30px;
    font-size:12px;
    font-style:normal;
    margin:0px;
    padding:0px 10px 0px 15px;
    text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
    background:#003f20 url('../images/hover_sub.gif') center left no-repeat;
    border:0px;
    color:#ffffff;
    text-decoration:none;
}
.menu p{
    clear:left;
}

Here is the HTML i am using:

<div class="menu">
    <ul>
        <li><a href="#" target="_self" >Main Item 1</a></li>
        <li><a href="#" target="_self" >Main Item 2</a>
            <ul>
                <li><a href="#" target="_self" >Test Sub Item</a></li>
                <li><a href="#" target="_self" >Test Sub Item</a></li>
                <li><a href="#" target="_self" >Test Sub Item</a></li>
                <li><a href="#" target="_self" >Test Sub Item</a></li>
            </ul>
        </li>
        <li><a href="#" target="_self" >Main Item 3</a></li>
        <li><a href="#" target="_self" >Main Item 4</a>
            <ul>
                <li><a href="#" target="_self" >Test Sub Item</a></li>
                <li><a href="#" target="_self" >Test Sub Item</a></li>
                <li><a href="#" target="_self" >Test Sub Item</a></li>
            </ul>                
        </li>
    </ul>
</div>

Answer 1

Here is how I would approach what you are looking for: http://jsfiddle.net/Dg3yQ/26/

I took some liberties on revising the CSS. The revised CSS reduced the code by a couple hundred characters and I believe it accomplishes what you intended. I hope this helps.

EDITED: Added a streamlined code example with comments to this answer on how these sub menus can be accomplished.

 #nav { list-style:none inside; margin:0; padding:0; text-align:center; } #nav li { display:block; position:relative; float:left; background: #006633; /* menu background color */ } #nav li a { display:block; padding:0; text-decoration:none; width:200px; /* this is the width of the menu items */ line-height:35px; /* this is the hieght of the menu items */ color:#ffffff; /* list item font color */ } #nav li li a {font-size:80%;} /* smaller font size for sub menu items */ #nav li:hover {background:#003f20;} /* highlights current hovered list item and the parent list items when hovering over sub menues */ /*--- Sublist Styles ---*/ #nav ul { position:absolute; padding:0; left:0; display:none; /* hides sublists */ } #nav li:hover ul ul {display:none;} /* hides sub-sublists */ #nav li:hover ul {display:block;} /* shows sublist on hover */ #nav li li:hover ul { display:block; /* shows sub-sublist on hover */ margin-left:200px; /* this should be the same width as the parent list item */ margin-top:-35px; /* aligns top of sub menu with top of list item */ }

 <ul id="nav"> <li><a href="#">Main Item 1</a></li> <li><a href="#">Main Item 2</a> <ul> <li><a href="#">Sub Item</a></li> <li><a href="#">Sub Item</a></li> <li><a href="#">SUB SUB LIST &raquo;</a> <ul> <li><a href="#">Sub Sub Item 1</a> <li><a href="#">Sub Sub Item 2</a> </ul> </li> </ul> </li> <li><a href="#">Main Item 3</a></li> </ul>

Answer 2

If you want to use CSS transitions (which won't work on display property), you can replace display with opacity instead. To deal with the fact that elements now take up space even when hidden, you can simply put the whole menu into a separate div that is positioned absolutely and highest in z-order (which a menu ought to be anyway). Then nothing will be in the way as the menu will be the only item in the top layer.

Here is the original example modified by me for CSS transitions:

 #menu { border:none; border:0px; margin:0px; padding:0px; font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif; font-size:18px; font-weight:bold; } #nav { height:35px; list-style:none; margin:0; padding:0; float:left; text-align:center; } #nav li { display:inline-block; position:relative; float:left; background: #006633; } #nav li a { display:inline-block; width:200px; line-height:35px; padding:0; text-decoration:none; color:#ffffff; } #nav li li {float:left; #006633;} #nav li li a { display:block; font-size:12px; opacity:1; transition: opacity 1s; } #nav li:hover {background:#003f20;} /*--- Sublist Styles ---*/ #nav ul { position:absolute; padding:0px; left:0; /* display:none; */ opacity:0; transition: opacity 1s; } /*--- Hide Sub Sublists ---*/ #nav li:hover ul ul { /* display:none; */ opacity:0; transition: opacity 1s; } /*--- Sublevel UL's display and position on hover ---*/ #nav li:hover ul { /* display:block; */ opacity:1; transition: opacity 1s; } /* had to make the position NOT based on hover, but permanent for the transition to work, thus moved it from POS_001 */ #nav li li ul { margin-left:200px; margin-top:-35px; } #nav li li:hover ul { /* POS_001 */ /* display:block; */ opacity:1; transition: opacity 1s; }

 <div id="menu"> <ul id="nav"> <li><a href="#" target="_self" >Main Item 1</a></li> <li><a href="#" target="_self" >Main Item 2</a> <ul> <li><a href="#" target="_self" >Test Sub Item</a></li> <li><a href="#" target="_self" >SUB SUB LIST 1 &gt;&gt;</a> <ul> <li><a href="#" target="_self" >Sub Sub Test Item 1</a> <li><a href="#" target="_self" >Sub Sub Test Item 2</a> </ul> </li> <li><a href="#" target="_self" >SUB SUB LIST 2 &gt;&gt;</a> <ul> <li><a href="#" target="_self" >Sub Sub Test Item 3</a> <li><a href="#" target="_self" >Sub Sub Test Item 4</a> </ul> </li> </ul> </li> <li><a href="#" target="_self" >Main Item 3</a></li> </ul> </div>