UL в DIV не обновляет высоту

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).

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 работы.