Add Sub-sub-menus To A Css Menu With Sub-menus

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 po

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

#navli {
    display:block;
    position:relative;
    float:left;
    background: #006633; /* menu background color */
    }

#navlia {
    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 */
    }
        
#navlilia {font-size:80%;} /* smaller font size for sub menu items */#navli:hover {background:#003f20;} /* highlights current hovered list item and the parent list items when hovering over sub menues *//*--- Sublist Styles ---*/#navul {
    position:absolute;
    padding:0;
    left:0;
    display:none; /* hides sublists */
    }

#navli:hoverulul {display:none;} /* hides sub-sublists */#navli:hoverul {display:block;} /* shows sublist on hover */#navlili:hoverul {
    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 */
    }

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

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

    }

#navli {
    display:inline-block;
    position:relative;
    float:left;
    background: #006633;
    }

#navlia {
    display:inline-block;
    width:200px;
    line-height:35px;
    padding:0;
    text-decoration:none;
    color:#ffffff;
    }
    
#navlili {float:left; #006633;}
    
#navlilia {
    display:block;
    font-size:12px;
    
    opacity:1;
    transition: opacity 1s;
}
    
#navli:hover {background:#003f20;}

/*--- Sublist Styles ---*/#navul {
    position:absolute;
    padding:0px;
    left:0;
    /* display:none; */opacity:0;
    transition: opacity 1s;
    }

/*--- Hide Sub Sublists ---*/#navli:hoverulul {
    /* display:none; */opacity:0;
    transition: opacity 1s;
}

/*--- Sublevel UL's display and position on hover ---*/#navli:hoverul {
   /* 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 */#navliliul {
   margin-left:200px;
   margin-top:-35px;

}

#navlili:hoverul {
   /* POS_001 *//* display:block; */opacity:1;
   transition: opacity 1s;
}

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