html - CSS:下拉子菜单不会对齐或停留在悬停状态

Question

我在下面创建了一个导航栏，但我无法让下拉菜单与主导航栏的底部对齐。我还有一个问题，当您单击下拉菜单中的其中一个标题时，它会消失。

---

<ul>

<li><a href="index.php">Home</a></li>
<li><a href="donate/index.php">Donate</a></li>
<li><a href="vote/index.php">Vote</a></li>

<li class='sub'><a href="#">Info</a>
<ul>
<li class='sub'><a href="#">Player Guide</a></li>
<hr />
<li class='sub'><a href="#">Server Commands</a></li>
<hr />
<li class='sub'><a href="#">Community Rules</a></li>
<hr />
<li class='sub'><a href="#">The Team</a></li>
<hr />
<li class='sub'><a href="#">Staff Handbook</a></li>
<hr />
<li class='sub'><a href="#">Server Alumni</a></li>
</ul>
</li>
<li>Live Map</li>

</ul>

<hr />
</div>

此处的 CSS:https://jsfiddle.net/s3q04h5q/

Answer 1

对齐问题出在您的 CSS 中。看看:

#menu > ul > li:hover > ul {
    opacity: 1;
    top: 65px;
    visibility: visible;
    border-style: solid;
    border-width: 3px;
    border-color: #7b8e19;
}

padding top 将下拉菜单进一步向下推。降低 65px 就可以了。