Home/ Questions/Q 7432657
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T09:29:32+00:00

http://jsfiddle.net/367ms/1/ Please take a look at my code. So what I want to achieve

  • 0

http://jsfiddle.net/367ms/1/

Please take a look at my code. So what I want to achieve – the blue border, when hovered is 10 px under the text. In additional, as you can see when you hover it opens submenu, but when I want to go down to submenu, it automatically closes, since there is no more hover on li element. I can fix that by adding height: 50px; but that also makes the blue border, go under the submenu and I have arrows in right center position, and they are ugly when hovered. Could you please help me fixing these two issues? With allowing to move mouse on submenu and the blue border?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There is a space between ul and li that breaks the :hover, if you remove top and bottom margins and top: 51px; you’ll access to the drop down menu.

    Use paddings instead of margins thus mouse don’t get out of element.

    It may be easier to use JavaScript to do that but not impossible with CSS.

    EDIT
    It seems to blink only between the blue line and th sub li, remember this rule:

    #top-menu-wrapper #menu ul li:hover

    It has effect on all descendant li, you may need to rewrite it as 2 rules, to get the direct children the first would be:

    #top-menu-wrapper #menu > ul > li:hover
    • 0