CODEWITHSUNDEEP
htmlcss
LCJ
LCJ

Reputation: 22652

CSS Menu item disappears on hover

I have a menu implemented using CSS as shown in http://jsfiddle.net/Lijo/vZgTP/.

When I hover on child items (Product I) most of the times it does not get highlighted as shown in figure – instead the child items get disappeared. How to resolve it? The CSS code is available in jsFiddle. It will be good if you can specify what change need to be done to resolve this.

Expected Behavior for children

Expected Behavior for children

Upvotes: 1

Views: 1517

Answers (3)

menislici
menislici

Reputation: 1167

Ok I think I got it, check the Fiddle

/*added padding-bottom: 8px;*/
#cssmenu ul li.has-sub:hover > a{ background:#FF5500; border-color:#FF5500;  top:-1px; z-     index:999;  padding-bottom: 7px;}

Upvotes: 1

Niclas Larsson
Niclas Larsson

Reputation: 858

Th problem is that the height of <li class="has-sub"> is less then the height of the <ul>, so when you move the mouse down over the <li> it will stop hovering the <li> and start hovering the <ul>.

Upvotes: 1

Gon
Gon

Reputation: 26

Haven't found a proper solution yet, but I think I found the reason. When you slowly move the mouse down to the sub-menu, there are a few pixels were the cursor does not hover over the #cssmenu > li anymore. This of course results in a disappearing sub-menu. If instead you move the mouse quickly, then the browser fires the mouse-event in the sub-menu.

A solution should be a seamless (or gap-less) transition from the #cssmenu > li to the sub-menu.

Upvotes: 0

Related Questions