Question

I have a menu which has sub-menus and I have defined it as such:

<nav class='top'>
    <li><a href="#">Lanky</a></li>
    <li>
        <a href="#">Links</a>
        <nav class='sub'>
            <li><a href="#">dead beef</a></li>
            <li><a href="#">cafe feed</a></li>
        </nav>
    </li>
    <li><a href="#">Locks</a></li>
    <li><a href="#">Linger</a></li>
</nav>

I style it in such a way that the sub nav appears beside it’s parent when on hover.

Problem is, I cannot click on those links. When I hover over the parent, the sub menu shows to the right and the Locks link displays beside the sub-menu (this is expexted). But once I mouseOut – say to try and click on dead beef, they disappear and the Lock link jumps back to its original position.

How do I make the sub menu persist to allow the mouse slide over to it?

Answer 1

Fixed this by addressing the list elements that had nav containers nested within. Many thanks to thirtydot for pointing me to jsFiddle – an amazing tool!

Here is the CSS…

nav { text-align: left; }
nav li { display: inline; text-align: center; }
nav a { display: inline-block; }
nav li { width: 95px; }
nav li nav { display: none; }
nav li:hover nav { display: inline; }