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

Question

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

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

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

有人知道吗？谢谢。

Answer 1

原因下拉菜单显示甚至鼠标不在菜单上，因为以下 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;
}