Dropdownlist disappears when mouse moves over hover

Question

I have a blog over at wordpress.com and there is a problem with the dropdown box on my main navigation.

When the mouse is hovering over, it appears, but when you move out of it to click a link its goes.

Heres the blog: https://readingartlab.wordpress.com/

Dropdown menu for 'Workshops'. This problem occurs when I added margin-top: 11%; so that it would align with the rule beneath it.

Any help? Thanks in advance.

EDIT:

This is the CSS that has been changed:

.main-navigation ul ul {
    padding: 8px 0;
    margin-top: 11%;
}

Answer 1

So, the issue here is that there is a set amount of space devoted to your .menu-item -- when you hover over it, that triggers the submenu, but in order to move into the submenu, your mouse is actually leaving the space that triggers the hover effect. In Chrome Developer tools, when you click on the list item for Workshops in the HTML window, you see exactly how much space is around the list item:

Ideally, you'll reconfigure the CSS for that whole navigation area so there's more padding around the list item.

You can also try to trigger the focus class that the drop-down caret uses via jQuery, but that runs into some of the same problems and you end up either having to leave the submenu open until you click elsewhere or set it to remove on mouseleave of a larger parent element, like the header, which is pretty wonky.

Answer 2

You can't hover the margin of an element. Use padding or border instead to fill the gap between the parent en child element.

Have a look at this minimalistic demo on jsfiddle .

ul.menu > li {
  display:inline-block;
  padding:5px;
}

ul.menu > li > ul {
  display:none;
  border-top:5px solid $navigation-background-color;
  margin:5px -5px -5px;
}
ul.menu > li:hover > ul {
  display:block;
}

ul.menu > li > ul > li {
  display:block;
  padding:5px;
}

Answer 3

Add a little padding to the bottom of your parent menu item .menu-item-has-children > a {padding-bottom: 10px; margin-bottom: -10px; } .menu-item-has-children > a {padding-bottom: 10px; margin-bottom: -10px; }

If you target just those with a child item - .menu-item-has-children - it won't affect the other menu items. The negative margin-bottom offsets the expansion of the menu area that occurs with the adding of the padding-bottom. Using the > selector says, "Target the <a> elements that are a direct descendent just one level deep of the things with class menu-item-has-children ." (So your extra padding won't affect the spacing / padding on your submenu.)

This is a great article about Child and Sibling Selectors in CSS - CSS Tricks: Child and Sibling Selectors

Answer 4

I hope these codes will solve the issue.

.site-header {
    border: 0;
    padding-bottom: 0;
}
.search-navigation {
    border-top: 0;
    margin-bottom: 0;
}
@media screen and (min-width: 960px) {
    .search-navigation {
        margin-top: 30px;
        padding-top: 0;
        border-top: 1px solid #cecece;
        border-bottom: 1px solid #cecece;
    }
}
.main-navigation li {
    padding: 15px 0;
    border: 0 !important;
}
@media screen and (min-width: 960px) {
    .main-navigation .menu-item-has-children {
        padding-right: 0;
    }
}
.main-navigation .menu-item-has-children > a {
    padding-right: 38.5px;
}
.main-navigation a {
    display: block;
    padding: 0 15px;
    border-right: 1px solid #e0e0e0;
}
.main-navigation>div>ul>li:last-child a {
    border: 0;
}

It was happening because there was a gap between submenu and < li > which you are using for triggering hover. visual