3

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>

2 Answers 2

11

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>

6
  • That is EXACTLY what I was looking for Thank you!! Thank you for the close cleanup as well, seeing changes like that helps me become a better programmer :) Jun 30, 2011 at 21:37
  • 1
    I'm glad I could help. Also, here is a slightly cleaner version jsfiddle.net/Dg3yQ/29. There were some extraneous attributes in the previous jsFiddle I posted. Good luck on your projects.
    – IMI
    Jul 1, 2011 at 12:38
  • Works in latest version of firefox but not in IE 10, for some reason link ( http://sdrv.ms/11tEsgN )
    – ablaze
    Jul 31, 2013 at 3:29
  • It does work in IE10. Your <html> tag is missing the "!DOCTYPE" and that is causing problems for IE. It should be <!DOCTYPE html>. Also, this menu is pure html/CSS and does not require jquery. You can safely remove <script src="jquery-1.10.2.min.js"> from your code if you are not using it for anything else.
    – IMI
    Sep 4, 2013 at 19:28
  • Great example. It's working fine. How would I alter the above to allow a menu item's text to word wrap? I've tried word-wrap:break-word at a lot of different levels of the CSS/nav, but I can't seem to get it to work? Sep 3, 2016 at 18:09
0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.