html - DIV 中的 UL 不会更新高度

Question

当您将鼠标悬停在导航栏上时，按钮应该会改变颜色。

然而，在我的例子中，按钮改变了颜色，但它并没有一直改变到导航栏的底部(你仍然可以在黑色下看到一些灰色)。

我如何让它一直到底部？

此外，出于某种原因，它会在 google chrome 中一直下降，但在其他浏览器中不会下降。

index.html

<div id ="nav">
<ul id = "navbar" class = "navigationbar">
    <li class="dropdown">
    <a href="#" class="dropbtn">Dropdown1</a>
        <div class="dropdown-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
        </div>
    </li>
    <li class="dropdown">
    <a href="#" class="dropbtn">Dropdown2</a>
        <div class="dropdown-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
        </div>
    </li>
    <li class="dropdown">
    <a href="#" class="dropbtn">Dropdown3</a>
        <div class="dropdown-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
        </div>
    </li>
    <li class = "dropdown">
    <a href="#" class="dropbtn">Not Dropdown</a>
    </li>
</ul>
</div>

和样式.css

html { width:100%; height:100%; margin:0 padding:0;}
body { width:100%; height:100%; margin:0; padding:0; }

#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color:lightslategray;
min-width: 100%;
list-style: none;
display: inline-block;
height: 100%;
}

#nav li {
height:100%;
vertical-align: middle;
line-height: 300%;
list-style: none;
display: inline-block;
}

#nav{
width: 100%;
display:table;
margin:0 auto;
text-align: center;
background-color: lightslategray;
}

.dropdown a{
height: 65%;
display: inline-block;
font-family: "Palatino Linotype";
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 18px;
}

.dropbtn{
height: 100%;
display: inline-block;
font-family: "Palatino Linotype";
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 18px;

}

.dropdown a:hover, .dropdown:hover .dropbtn {
background-color:black;
color: white;
}

li.dropdown {
display: inline-block;
}

.dropdown-content {
z-index: 20;
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1; color: black;}

.dropdown:hover .dropdown-content {
display: block;
}

Answer 1

我可以在 Edge 和 Firefox 上复制错误。对 ul.navbar 进行以下更改之一。 (仅在 firefox 中测试)。

1. display: inline-block 到 display: block
2. 添加vertical-align: top 或bottom
3. 移除溢出:隐藏

1 和 2 来自这里:Remove Extra Space at Bottom of HTML List Item ，我不确定为什么 3 有效。