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;
}

衬垫顶部向下推动下拉。降低65px你应该很好。

Answer 2

此位将您的下拉列表与标题行底部对齐，根据需要调整top

#menu > ul > li:hover > ul{
  top: 45px;
}

你的dropmenu在悬停时消失的原因是因为链接的hitbox很小，可以通过将其应用到下拉链接来修复

.sub a{
  padding: 20px 0px;
}

CSS：下拉子菜单未对齐或保持悬停状态

2 个答案: