Question

子菜单项在悬停时不会留在那里。例如，在悬停门户网站时，ul显示，但是当我想向下移动以点击它时，它不会停留在那里。

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>的子<a>有一个设置填充，但该填充不会拉伸父菜单<ul>元素的整个高度。因此，<a>和子菜单<ul>之间会有一点点空间，当你试图将鼠标悬停在它上面时会导致子菜单再次崩溃：它必须移动一点点太空了。

底部填充的增加然后修复了这个因为它占用了<li>和子菜单<ul>之间的那么小的空间。

Answer 2

首先你不需要使用opacity：0当你使用display：none时，其次ul不会停留，因为如果你仔细注意到父li和子菜单之间有差距。在父李至少1px上重叠子菜单应该可以完成这项任务。

同时删除此

position: absolute;
top: 40px;

这

#menu ul li ul li {
}

Fiddle

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

2 个答案: