Question

I have created a CSS fly out menu.
Seems to fly out the submenu on hover, Which is what I need.
The only problem I have is when the li a has a submenu, You cant click on the Top level menu item. I can see in Firebug that it is overlaying over the top.

Any suggestions how I can fix this?

Thanks

Answer 1

If you giv the submenu ul a minus z-index this will fix your problem.

#nav ul ul {
    display: none;
    z-index: -1;
    }

Here is the updated jsfiddle http://jsfiddle.net/JsVr4/3/

EDIT

After viewing the site I have made a change to my answer.

Start by changing the following in your #nav ul ul li from

#nav ul ul li {
    top: 42px;
    }

to

#nav ul ul li {
    top: 0px;
    }

then add the following to the #nav ul ul

#nav ul ul {
    display: none;
    position: relative;
    margin-top: 32px;
    padding-top: 10px;
    }

This will solve the problem. The #nav ul ul was positioned above the a tag which was causing the problem.