html - 子菜单项不会停留在悬停状态

子菜单项不会在悬停时停留在那里。例如，将鼠标悬停在Portal上时，ul会显示，但是当我要向下移动以单击它时，ul不会停留在那里。

JS在这里摆弄：http://jsfiddle.net/42qg5/2

的HTML

<div id="menu">
<div class="container">
  <ul>
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">About SRJC</a>
    </li>
    <li><a href="#">Admission</a>
    </li>
    <li><a href="#">The SR Programmes</a>
    </li>
    <li><a href="#">CCAs</a>
    </li>
    <li><a href="#">Portals</a>

        <ul class="submenu">
            <li><a href="#">ASPIRE</a>
            </li>
        </ul>
    </li>
    <li><a href="#">Staff & Parents</a>
    </li>
  </ul>
</div>
</div>

最佳答案

要解决此问题，您需要将#menu li a上的填充设置为10px 20px 14px 20px;，为您提供代码：

#menu li a {
    display: inline;
    padding: 10px 20px 14px 20px;
    margin: 0;
    color: #fff;
    text-decoration: none;
}

为了解释为什么这项工作，我首先需要解释为什么这首先会出错。

当父<li>悬停在上方时，通过显示子菜单来触发子菜单的打开。该<li>的子级<a>具有设置的填充，但是该填充不会扩展父菜单<ul>元素的整个高度。因此，<a>和子菜单<ul>之间只有一小段空间，当您将鼠标悬停在该子菜单上时，子菜单会再次折叠：它只能移动一小段空间。

然后增加底部填充可以解决此问题，因为它占用了<li>和子菜单<ul>之间的一小部分空间。

关于html - 子菜单项不会停留在悬停状态，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21654324/