html - 子菜单在错误的悬停区域打开

Question

这里是测试站点。如果您将鼠标放在滑块的左上角，则会打开子菜单。我希望它在悬停菜单按钮时打开，而不是从无关区域打开。我已经尝试了几个小时，但没有成功。这是CSS 的链接。我什至不知道问题在代码中的位置。谢谢！

Answer 1

dropdown 是父 li 的子...并且由于显示下拉（不透明度为 0），悬停事件从下拉触发到父并应用样式。

使用显示而不是不透明度：

#menu .menu-dropdown {
    text-align: left;
    background-color: #0099ff;
    position: absolute;
    width: 620px;

    /*opacity: 0;*/
    display:none;

    z-index: 9999;
}
#menu li:hover .menu-dropdown {
    left: 0;

    /*opacity: 1;*/
    display:block;

    -webkit-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -ms-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    transition: opacity 0.2s;
}