Question

hopefully this will be an easy answer for some of you CSS veterans out there.

I’m developing a site for a client. For readability, I’ll just give you a link to the website and the css page in question.
HTML
CSS

I’m trying to make a sub menu pop up to the right of the main menu when you scroll over “Star Quartz Grout.” My current CSS obviously isn’t correct though, and I could use some guidance.

ul#subNav {display: none; width: 134px; }
li:hover ul#subNav, li.over ul#subNav {display: inline-block; position: absolute; top: 0px; left: 134px; }

My guess is that it’s working but it’s hidden behind the rest of the page. I could be wrong though. It’s kind of hard to confirm, even with Chrome’s “Inspect Element” (very nice thing btw). It’s probably some dumb mistake. Anyway, thanks in advance. I’m a bit of a CSS novice.

Answer 1

You can try this :

ul#subNav ul
{
display: none;
}

ul#subNav li:hover ul
{
display:block;
}

But be careful because your “li” zone is smaller than the link itself.

I did it this way on this website : Spirit Of Polo (hover the shopping cart).
Be careful, this kind of effect (hover) will not be visible on touch-screen devices (because hover is impossible if you think about it)