CSS dropdown menu disappears when mouse moves off of <li>

Question

I have the problem whereby I can't keep my sub menu visible. When I hover over the parent <li> it appears, and then when I move down to select one of the sub menu items it disappears. This is as soon as focus is lost from the parent <li>

I can't find a solution anywhere.

can someone please check it?

http://www.mymediaventure.com/about.php. It is under the Pricing tab. This is so frustrating. other examples I look at seem to work and I can't spot any clear differences that would hint why theirs works and mine doesn't.

Thanks in advance.

Answer 1

The problem is in styles.css and has to do with your #main_content h1 title element overlapping your div#primary_navigation. You can fix it by setting a higher z-index on your navigation element as I've done in the example below.

#wrapper #top #right div#primary_navigation
{
    position : relative;
    z-index: 2;
    font-size : 11pt;
    margin-top : 72px;

}

And a little further down in the CSS:

#main_content h1
{
    position : relative;
    z-index: 1;
    top : -20px;
    font-weight : normal;
}

If you want to visually see the problem, add a background colour to your #main_content h1 and you'll notice it almost completely overlaps your tabs. As a result you can trigger the dropdown when you hover over the top of the Pricing tab, but as you move down to the sub items, your mouse goes over the title and the menu disappears.