Add Sub-Sub-Menus to a CSS menu with Sub-Menus

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 sub

Answer 1

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

        

            
Main Item 1
            
Main Item 2
                

                    
Test Sub Item
                    
SUB SUB LIST 1 >>
                        

                            
Sub Sub Test Item 1
                            
Sub Sub Test Item 2
                        
                    
                    
SUB SUB LIST 2 >>
                        

                            
Sub Sub Test Item 3
                            
Sub Sub Test Item 4
                        
                    
                
            
            
Main Item 3