Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS menu with 2nd level sub menu background/loading issues

CSS menu with 2nd level sub menu background/loading issues

Problem

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

Problem courtesy of: It.levon

Solution

This should work...

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

  • Home
  • Products
    • Product 1
      • blue
      • red
    • Product 2
      • green
  • About
  • Contact

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;
    }    ​​
Solution courtesy of: Kris Hollenbeck

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS menu with 2nd level sub menu background/loading issues

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×