Question

using css menumaker menu found here: http://cssmenumaker.com/menu/grey-impression-drop-down-menu-0 I’m trying to create a 3rd level for sub-menu.

here is an example with html and css. http://jsfiddle.net/it_levon/ew4MP/

going through the css i was able to add > to .cssmenu li:hover ul{display: block}
so it looks like .cssmenu li:hover > ul{display: block}. this loads the sub menu item but it keeps “product 1” and “blue” highlighted as if you are selecting both even though the links associated with each work correctly. I’m hoping someone can help me figure out how to have only the item that the user is hovering on stay highlighted and IF at all possible to get the 3rd level submenu to shift over to the right so it looks like its expanding.

Thanks in advance

Answer 1

This should work…

http://jsfiddle.net/it_levon/ew4MP/

<div class='cssmenu'>
<ul>
   <li class='active '><a href='index.html'><span>Home</span></a></li>
   <li><a href='#'><span>Products</span></a>
      <ul>
         <li><a href='#'><span>Product 1</span></a>
           <ul>
              <li><a href='#'><span>blue</span></a></li> 
              <li><a href='#'><span>red</span></a></li>               
           </ul>               
         </li>
         <li><a href='#'><span>Product 2</span></a>
           <ul>
            <li><a href='#'><span>green</span></a></li>
           </ul>               
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul>
</div>​

CSS…

.cssmenu{
    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:14px;
    font-weight:bold;
    }
.cssmenu ul{
    background:#333333;
    height:35px;
    list-style:none;
    margin:0;
    padding:0;
    }
.cssmenu li{
    float:left;
    padding:0px;
    }
.cssmenu li a{
    background:#333333 url('images/seperator.gif') bottom right no-repeat;
    color:#cccccc;
    display:block;
    font-weight:normal;
    line-height:35px;
    margin:0px;
    padding:0px 25px;
    text-align:center;
    text-decoration:none;
    }
.cssmenu li a:hover, .cssmenu ul li:hover a{
    background: #2580a2 url('images/hover.gif') bottom center no-repeat;
    color:#FFFFFF;
    text-decoration:none;
    }
.cssmenu li ul{
    background:#333333;
    display:none;
    height:auto;
    padding:0px;
    margin:0px;
    border:0px;
    position:absolute;
    width:225px;
    z-index:230;
    /*top:1em;*/
    }

.cssmenu li ul li ul {
   margin-left:225px;
   margin-top:-35px;    
}

.cssmenu li:hover > ul{
    display:block;

    }
.cssmenu li li {
    background:url('images/sub_sep.gif') bottom left no-repeat;
    display:block;
    float:none;
    margin:0px;
    padding:0px;
    width:225px;
    }
.cssmenu li:hover li a{
    background:none;

    }
.cssmenu li ul a{
    display:block;
    height:35px;
    font-size:12px;
    font-style:normal;
    margin:0px;
    padding:0px 10px 0px 15px;
    text-align:left;
    }

.cssmenu li ul li:hover {
    background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
    border:0px;
    color:#ffffff;
    text-decoration:none;
    }
.cssmenu p {
    clear:left;
    }    ​​