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

Question

这是testing site。如果将鼠标放在滑块的左上角，则会打开子菜单。我希望它在我悬停菜单按钮时打开，而不是从不相关的区域打开。这是我努力的几个小时但没有成功。这是link of the CSS。我甚至不知道问题在代码中的位置。谢谢！

Answer 1

下拉列表是父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;
}