I cant resize dropdown menu in navigation bar css/html

Question

im trying to resize my dropdown menu in my navigation bar to 65px high but it doesnt change no matter what height i put in, originally i had used ul and li tags for my nav bar but i had to change it all to divs because w3 validator said that it wasnt exactly correct so i had to change it all to divs, here is my html and source code:

<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

The problem here is the content is overflowing the height you are setting, here's a couple ways of solving this.

Note: I've moved .container a rules to the top of the style, so they don't overwrite anything in .dropdown-content a

Make things smaller

The simplest way is to resize what is overflowing. In this case the following style can simply be applied:

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

codepen

But this isn't a nice way of doing it, and involves alot of fiddling to center things correctly, so my own suggestion would be...

flex it

I find flex very useful for aligning anything. Removing the padding and height's set on .dropdown-content a you can apply/replace the following styles for perfectly fitting and centered text within the 65px height. Read more about flex here.

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

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

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

This way is a lot more dynamic, the height of .dropdown-content can be adjusted however you like an everything will fit accordingly.

codepen