Search code examples
cssdrop-down-menusubmenu

Dropdown submenu disappears before mouse cursor reaches it

My second question today. I don't seem to find the answer why the dropdown disappears before I can reach it with my mouse cursor.

http://www.liveaerosmith.com

The "1970s" button in the top menu has a submenu, but it can't be clicked because it disappears before the cursor can reach it.

Same behaviour on FF and Chrome.

Solution

  • This image says it all:

    enter image description here

    so there's a clear gap between the element with the :hover state and the child ul item

    you could create a transparent :after pseudo element on the hovered LI that will connect the elements and "fill" the gap.

    Or rather do it the proper way:

    .site-bar {
    border-top: solid 1px #ebebeb;
    border-bottom: solid 1px #ebebeb;
    /*padding: 13px 0;                  REMOVE THIS */
    z-index: 10000000;
}

.navigation > li > a {
    margin-right: 30px;
    padding: 13px 0;                   /* ADD THIS */
}

.navigation li:hover > ul, .navigation .sfHover > ul {
    top: 44px;                         /* INSTEAD OF 34px */
}