Question

我有一个垂直菜单，其中一些菜单右侧显示子菜单。当我悬停它的第一个菜单和子菜单时，它显示属于第三个菜单的第二组子菜单。

<body>
<ul class="menu">
    <li><a href="#">Population and Socio-Economic Atlas</a>
        <ul>
            <li><a href="#" class="chapter1">Population</a>
              <ul>
                  <li><a href="#" class="map11">Population Density</a></li>
                  <li><a href="#" class="map12">Population By Sex</a></li>
                  <li><a href="#" class="map13">Population By Age</a></li>
              </ul>
            </li>
            <li><a href="#" class="chapter2">Education</a></li>
            <li><a href="#" class="chapter3">Agriculture</a>
              <ul>
                  <li><a href="#" class="map31">Agricultural Land</a></li>
                  <li><a href="#" class="map31">Agriculture Holding</a></li>
                  <li><a href="#" class="map31">Agriculture By Type</a></li>
              </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Level1 Menu2</a></li>
    <li><a href="#">CA Election 2070</a>
        <ul>
            <li><a href="#" class="election1">Districts</a></li>
            <li><a href="#" class="election2">Constituencies</a></li>
            <li><a href="#" class="election3">Result</a>
              <ul>
                  <li><a href="#" class="election31">District Map</a></li>
                  <li><a href="#" class="election32">Constituencies Map</a></li>
                  <li><a href="#" class="election33">Election Result 2070</a></li>
              </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">To Be Continued</a></li>
</ul>
</body>

我的CSS下面：

.menu,
.menu ul,
.menu li,
.menu a {
    margin: 5px;
    padding: 0;
}
.menu {
    height: 250px;
    width: 300px;
    background: #FFCC99;
}
.menu li {
    width:100%;
    height:25px;
    text-align:left;
    display: block;
    padding: 0 0px;
    margin: 3px 0px;
    line-height: 25px;
    border-bottom: 1px solid #393942;
}

.menu li a {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    text-decoration: none;
    font-size: 14px;
}
.menu li:hover > a { color: #FF0000; }

/* second level menu */
.menu ul {
    position: relative;
    width: 200px;
    top: -26px;
    left: 295px;
    opacity: 0;
    background: #CCCCCC;
}
.menu li:hover > ul { opacity: 1; }
.menu ul li {
    height: 25px;
    overflow: hidden;
    padding: 0 0px;
    width: 200px;
    padding: 0 0px;
    margin: 6px 0px;
    border: none;
    border-bottom: 1px solid #353539;
}
.menu li:hover > ul li {
    height: 25px;
    overflow: visible;
    padding: 0 0px;
}

.menu ul li a {
        font-family: Helvetica, Arial;
    font-style: italic;
    font-weight: normal;
    font-size: 12px;
}
.menu ul li:last-child a { border: none; }

/* third level menu */
.menu ul ul {
    position: relative;
    width: 200px;
    top: -26px;
    left: 195px;
    opacity: 0;
    background: #00FF00;
}
.menu ul ul:hover > ul { opacity: 1; }
.menu ul ul li {
    height: 25px;
    overflow: hidden;
    padding: 0 0px;
    width: 200px;
    padding: 0 0px;
    margin: 6px 0px;
    border: none;
    border-bottom: 1px solid #0000FF;
}
.menu ul ul ul:hover > ul {
    height: 25px;
    overflow: visible;
    padding: 0 0px;
}

.menu ul ul li a {
    font-family: Helvetica, Arial;
    font-style: italic;
    font-size: 12px;
}
.menu ul li:last-child a { border: none; }

如何解决这个问题？

Answer 1

您需要使用display: block/none;代替overflow: hidden/visible隐藏/取消隐藏子菜单。

Here's the fiddle

overflow仅影响元素的可见性。该元素仍然存在于DOM中，并响应/触发与其关联的所有事件。因此，问题。

Answer 2

这是因为您使用opacity来隐藏子菜单。当opacity为0时，子菜单仍在页面上，并接收鼠标事件。添加到较低元素的子菜单，可见性堆栈较高，这就是他们窃取hover的原因。而不是opacity使用display。小提琴：http://jsfiddle.net/mL3eD/

将鼠标悬停在菜单和子菜单上

2 个答案: