为什么显示下拉菜单时没有将鼠标悬停在主菜单上？

Question

对于这个网站http://www.baptisteyoga.com/

如果我将光标移动到主菜单下方一点，就会显示下拉菜单。为什么？有点annoying/unnecessary。我们想要的是子菜单仅在我们将鼠标悬停在主导航菜单本身上时出现。例如仅将鼠标悬停在 "Programs" 上会显示程序的下拉菜单。

基本上是为了应用标准菜单行为。

有人知道吗？谢谢

Answer 1

因为您已将悬停属性设为锚标记。标签的完整区域将涵盖功能。

将特定标签的高度和宽度限制为仅文本。

如果你修改高度属性可用在下面CSS会起作用：

header .large-menu nav > ul > li > a

注意：请确保此高度变化不会影响使用相同 class 层次结构的其他组件。

Answer 2

原因下拉菜单显示甚至鼠标不在菜单上，因为跟随 CSS 选择器有 opacity: 0; 和悬停 opacity: 1;，方法没有问题，但不透明度没有'不要隐藏元素只是让它透明所以它在那里但不可见

header .large-menu .has-dropdown .sub-menu {
    position: absolute;
    left: 50%;
    margin-left: -90px;
    top: 50px;
    height: 0;
    width: 180px;
    opacity: 0; <<<---Here
    -webkit-transition: .3s;
    transition: .3s;
    background: rgba(255,255,255,.9);
}

header .large-menu .has-dropdown:hover .sub-menu {
    height: auto;
    opacity: 1; <<<---Here
    -webkit-transition: .3s;
    transition: .3s;
}

所以更好的方法是隐藏元素更改 opacity 属性到 visibility 属性如下所示

header .large-menu .has-dropdown .sub-menu {
    position: absolute;
    left: 50%;
    margin-left: -90px;
    top: 50px;
    height: 0;
    width: 180px;
    visibility: hidden;
    -webkit-transition: .3s;
    transition: .3s;
    background: rgba(255,255,255,.9);
}

header .large-menu .has-dropdown:hover .sub-menu {
    height: auto;
    -webkit-transition: .3s;
    transition: .3s;
    visibility: visible;
}

为什么显示下拉菜单时没有将鼠标悬停在主菜单上？

Why is the dropdown menu displaying without hovering over the main menu itself?

html

css

drop-down-menu