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

Question

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

JS fiddle 在这里: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>

Answer 1

要解决此问题，您需要在 #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>的 child <a>有一个设置的填充，但该填充不会拉伸(stretch)父菜单的整个高度 <ul>元素。因此，<a> 之间有一点空间。和子菜单 <ul> ，当您尝试将鼠标悬停在它上面时，这会导致子菜单再次折叠:它只需要移动一点点空间。

底部填充的增加解决了这个问题，因为它占用了 <li> 之间的那一点点空间。和子菜单 <ul> .