CODEWITHSUNDEEP
cssdrop-down-menusubmenu
Mr. Fontastic
Mr. Fontastic

Reputation: 302

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.

Upvotes: 1

Views: 1800

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206131

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 */
}

Upvotes: 1

Related Questions