UL在DIV不會更新高度

Question

當你將鼠標懸停在導航欄，按鈕應該改變顏色。

然而，在我的情況下，該按鈕改變顏色，但它不會做這樣一路導航欄的底部（你仍然可以看到下黑一些灰色）。

如何讓這個它一路走到底部？

而且，由於某些原因，它會在谷歌瀏覽器一路下跌，而不是在其他瀏覽器。

的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> 

和style.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

我可以複製的邊緣和Firefox的錯誤。對ul.navbar進行以下更改之一。 （僅在Firefox中測試）。

1. display: inline-block到display: block
2. 添加vertical-align: top或bottom
3. 刪除overflow: hidden

1和2是從這裏：Remove Extra Space at Bottom of HTML List Item，我不知道爲什麼3個作品。