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> 

との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のみでテスト済み）。 display: block

へ

1. display: inline-blockoverflow: hidden

1と2はここからです削除vertical-align: topまたはbottom

を追加します。Remove Extra Space at Bottom of HTML List Itemなぜ3つの作品、私はわかりません。