我無法調整導航欄css / html中的下拉菜單的大小

Question

我試圖將導航欄中的下拉菜單的大小調整為65px高，但是無論我放什么高度都不會改變，最初我在導航欄中使用了ul和li標簽，但由於w3驗證程序，我不得不將其全部更改為divs說這不是完全正確，所以我不得不將其全部更改為div，這是我的html和源代碼：

<div id="nav">
<div class="container">
<a href="404.html">404found</a>
<div class="dropdown">
<button class="dropbtn">Courses</button>
<div class="dropdown-content">
<a href="nonadvancedcourses.html">Non-Advanced</a>
<a href="advancedcourses.html">Advanced</a>
</div>
</div>
<a href="projects.html">Projects</a> 
<a href="contact.html">Contact</a>
</div>
</div>



.dropdown {
float:left;
overflow:hidden;
height:65px;
width:205px;
}

.dropdown .dropbtn {
font-size:16px;    
border:none;
outline:none;
background-color:#FFF;
width:205px;
height:65px;
font-family:"Calibri Light", Arial, Helvetica, sans-serif; 
font-weight:100;
color:#444;
background:#FFF;
}

.container a:hover, .dropdown:hover .dropbtn {
background:#E9E9E9;
}

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

.dropdown-content a {
float:left;
font-size:16px;
background:#FFF;
text-align:center;
padding:0;
margin:0;
text-decoration:none;
width:205px;
height:65px;
font-family:"Calibri Light", Arial, Helvetica, sans-serif; 
font-weight:100;
color:#444;
line-height:23px;

}

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

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

.container {
overflow:hidden;
background-color:#FFF;
font-family:Arial;
height:65px;
}

.container a {
float:left;
font-size:16px;
background:#FFF;
text-align:center;
padding-top:23px;
text-decoration:none;
width:205px;
height:65px;
font-family:"Calibri Light", Arial, Helvetica, sans-serif; 
font-weight:100;
color:#444;
}

Answer 1

這里的問題是內容正在溢出您設置的高度，這是解決此問題的幾種方法。

注意：我已經將.container a規則移至.container a的頂部，因此它們不會覆蓋.dropdown-content a任何.dropdown-content a

縮小尺寸

最簡單的方法是調整溢出內容的大小。 在這種情況下，可以簡單地應用以下樣式：

.dropdown-content a {
  padding-top: 4px;
  height: 28.5px;
}

codepen

但這不是一個好的方法，並且涉及到很多擺弄正確地使事情居中的事情，所以我自己的建議是...

彎曲它

我發現flex對於對齊任何內容非常有用。 刪除.dropdown-content a上的填充和高度設置，您可以應用/替換以下樣式，以在65px高度內完美地適合居中的文本。 在此處閱讀有關flex的更多信息。

.dropdown-content {
  flex-direction: column;
}

.dropdown-content a {
  display: flex;
  align-items: center;
  justify-content: center;
}

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

這種方式更具動態性，可以調整.dropdown-content的高度，但是您希望所有內容都適合。

codepen