chaitz9 chaitz9 -4 years ago 99
CSS Question

Sub-menu hides when hovered outside li

There is a navigation menu, the design is as given in the image below.

Menu Layout

Now, when I

hover
on
About Us
sub-menu gets open.

But when I try to move the cursor to the sub-menu item, the
sub-menu gets closed
- the reason being that
hover
is being removed from
li
.

I want the menu to remain open till the cursor reaches the sub-menu item.

Please Note:The space between Menu and sub-menu has to be kept as it is (As indicated with red border in the image above).

You can find the link to the code, here

Any help would be appreciated!

Answer Source

A quick solution:

ul#nav li:hover > ul  {margin: 40px 0 0 0; border-top: 10px solid #b58d69; }

Cheers!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download