当鼠标悬停在

Question

我在wordpress.com上有一个博客，主导航上的下拉框出现问题。

当鼠标悬停在它上面时，它会出现，但是当你移出鼠标点击一个链接时它就会移动。

继承博客：https://readingartlab.wordpress.com/

“工作坊”的下拉菜单。当我添加margin-top: 11%;以便它与下面的规则对齐时会发生此问题。

有任何帮助吗？提前谢谢。

编辑：

这是已更改的CSS：

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

Answer 1

所以，这里的问题是你的.menu-item有一定数量的空间 - 当你将鼠标悬停在它上面时会触发子菜单，但为了进入子菜单，你的鼠标就是实际上离开了触发悬停效果的空间。在Chrome开发者工具中，当您在HTML窗口中单击Workshops的列表项时，您会确切地看到列表项周围有多少空间：

理想情况下，您将为整个导航区域重新配置CSS，以便列表项周围有更多填充。

你也可以尝试通过jQuery触发下拉键盘使用的focus类，但是会遇到一些相同的问题，你最终要么必须打开子菜单，直到你点击其他地方或者将其设置为删除较大父元素的mouseleave，例如标题，这非常难以理解。

Answer 2

您不能悬停元素的边距。使用填充或边框来填充父en子元素之间的间隙。

在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

在父菜单项的底部添加一点填充 .menu-item-has-children > a {padding-bottom: 10px; margin-bottom: -10px; }

如果你只针对那些带有子项目的人 - .menu-item-has-children - 它不会影响其他菜单项。负边距底部抵消了添加填充底部时发生的菜单区域的扩展。使用＆gt;选择器说，＆＃34;将<a>个直接后代的元素定位在类menu-item-has-children的事物的一个深层。＆＃34; （因此，您的额外填充不会影响子菜单上的间距/填充。）

这是一篇关于CSS中的儿童和兄弟选择器的精彩文章 - CSS Tricks: Child and Sibling Selectors

Answer 4

我希望这些代码可以解决问题。

.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;
}

这是因为子菜单和＆lt;之间存在差距。 li>您用于触发悬停。visual