Please help me with CSS!

[T.Kuranari]

I am currently building my own website locally on my computer and have issues with CSS, specifically with designing the topmenu. I want to attach to each item of the topmenu 2 images, one default one and one that shows up via a mouseover-effect. But here is the thing, I also want to add to each menu item a submenu and I don't want the mouseover-effect-picture to vanish if I point the mouse cursor to the submenu. So basically I want the mouseover-effect to still be enabled while the mouse cursor points at the submenu. But I don't know how this could be done.

Here is my current CSS code regarding the image mapping of the first item of the topmenu:

#topmenu ul.menu .item-444 a {
background: url('../images/image1.png') 0 0 no-repeat;
background-position: center;

}

#topmenu ul.menu .item-444 a:hover {
background: url('../images/image2.png') 0 0 no-repeat;
background-position: center;

}

Thank you

 

[tj_cool]

I don't know your HTML code, but assuming the li element contains both the anchor and the submenu, you could put the hover on the li instead:

From:
ul li a:hover { ... }

To:
ul li:hover > a { ... }

Note that the above won't work on IE unless you use a Strict Doctype (it'll ignore the hover otherwise). It may also run a bit slower in IE7/8.
Apparently that's because using :hover on non-anchors is "inefficient".


Alternatively you can go and write JavaScript that adds a certain class to the anchor when hovering the list or something.

 

[T.Kuranari]

Thank you tj and I'm sorry for taking so long to reply. I managed to gather a lot of CSS knowledge since I started this thread an was able to solve any CSS issue myself