Question

I’m working on a css menu. I’m trying to edit existing code and I need to do a css menu with individual images for every item of the first level <li> like so:

.leftmenu a.link1 { padding-top: 42px; background:transparent url('../images/home_on.gif');   }
.leftmenu a.link2 { background:transparent url('../images/serv_off.gif'); }
.leftmenu a.link3 { background:transparent url('../images/know_off.gif'); }
.leftmenu a.link4 { background:transparent url('../images/exp_off.gif'); }
.leftmenu a.link5 { background:transparent url('../images/ref_off.gif'); }
.leftmenu a.link6 { background:transparent url('../images/links_off.gif'); }
.leftmenu a.link7 { background:transparent url('../images/contact_off.gif'); }
.leftmenu a.link8 { background:transparent url('../images/blog_off.gif'); }

.leftmenu a.link1:hover { background:transparent url('../images/home_on.gif') -163px -42px no-repeat; background-position:0 0; }
.leftmenu a.link2:hover { background:transparent url('../images/serv_on.gif') -163px -28px  no-repeat;   background-position:0 0;  }
.leftmenu a.link3:hover {background:transparent url('../images/know_on.gif') -163px -28px  no-repeat; background-position:0 0; }
.leftmenu a.link4:hover { background:transparent url('../images/exp_on.gif') -163px -28px  no-repeat; background-position:0 0; }
.leftmenu a.link5:hover { background:transparent url('../images/ref_on.gif') -163px -28px  no-repeat; background-position:0 0;  }
.leftmenu a.link6:hover { background:transparent url('../images/links_on.gif') -163px -28px  no-repeat; background-position:0 0;  }
.leftmenu a.link7:hover {background:transparent url('../images/contact_on.gif') -163px -28px  no-repeat; background-position:0 0;  }
.leftmenu a.link8:hover {background:transparent url('../images/blog_on.gif') -163px -28px  no-repeat; background-position:0 0;  }

Now I’m trying to add a flyout to this menu and the only way I could find to do it was like this:

li.list2:hover + ul.sub-menu{  
display: block;
position: absolute;
left: 14px;
text-indent: 0px!important;

background-color: black;
margin: 0px;

list-style: none;
top: -20px;
border-radius: 10px;
}
ul.sub-menu{
display: none;
}

There is also this css being added to the menu:

.leftmenu{ width:163px; margin-left:7px; position: relative; z-index: 0;}
.leftmenu ul{ margin:0px; padding:0px;  }
.leftmenu  a { display:block; width:163px; height:0; padding-top:28px; color: white;  text-indent:-3000px; }

This seems to be working ok except that when I roll off the menu item set to display the sub-menu items the sub menu simply disappears, maybe it’s a z-index issue but I don’t think so?

I don’t mind even recoding it from scratch I maybe in jQuery if someone can point me in the direction of a nice tutorial to style each of the first menu items individual colors/images.

Answer 1

It is either because you have a gap between the first level menu and the sub menu item OR your ‘nested ul’ is not nested within the li causing the hover behaviour.

You definitely have the latter issue i.e.

<ul>
  <li/>
  <li>
    <a/>      <<< (read below first) in here...
  </li>
  <ul />     <<< this ul should be (see above arrows)
  <li/>
</ul>