I have a drop down list that appears when hovering over a nav item. I want each a tag within the drop down to be centered vertically in the drop down. I have turned the list items red to help me understand their positions. Here is my html
.navDropList .navDropItem{
margin-top: 10px;
background-color: red;
width: 100%;
list-style: none;
}
.navDropList{
padding-top: 40px;
display: none;
position: absolute;
width: 100%;
background-color:#414141;
}
.navDropList ul{
margin-bottom: 15%;
}
.navList .navTag:hover .navDropList{
display: flex;
align-items: center;
}
.navDropList .dropTag{
font-size: 20px;
color:#d3d3d3;
text-decoration: none;
font-family: 'Source Sans Pro', sans-serif;
}
.navList .navListItem:hover .navDropList{
display: block;
}
.navDropList .dropTag:hover{
font-weight: 900;
}
<nav>
<ul class= "navList">
<li class=navListItem><a class="navTag current"
href="nehemiahUniversity.html">Home</a></li>
<li class=navListItem><a class="navTag" href="courses.HTML" >Courses</a></li>
<li class=navListItem><a class="navTag" href="training.html">Training Material</a>
<div class="navDropList">
<ul>
<li class="navDropItem"><a class="dropTag"
href="training.html#productionSection">Production</a></li>
<li class="navDropItem"><a class="dropTag"
href="training.html#warehouseSection">Warehouse</a></li>
<li class="navDropItem"><a class="dropTag"
href="training.html#qualitySection">Quality Control</a></li>
<li class="navDropItem"><a class="dropTag"
href="training.html#blendingSection">Blending</a></li>
<li class="navDropItem"><a class="dropTag"
href="training.html#officeSection">Office</a></li>
</ul>
</div>
</li>
<li class=navListItem><a class="navTag" href="walkthrough.HTML">Walkthrough</a>
</li>
</ul>
</nav>
</div>
</header>
Here is what the drop down looks like drop down list
How do I get the text to be centered in the drop down?