Question

对于此网站http://www.baptisteyoga.com/

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

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

有人知道吗？感谢。

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

Answer 2

由于您已将hover属性指定给锚标记。标签的完整区域将涵盖功能。

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

如果修改以下CSS中可用的高度属性，则可以使用：

标题.large-menu nav＆gt; ul＆gt; li>一个

注意：请确保此高度更改对使用相同类层次结构的其他组件没有影响。

为什么显示下拉菜单而不悬停在主菜单上？

2 个答案: