Trying to customize my menu with two levels, I decided to remove the background color from the top level items by modifying the ".nav li" CSS class. However, this caused an issue with the display of sub-menu items, creating a 5px gap when hovering over the upper menu items. Adjusting the margin property in the ".nav li a" class resulted in the sub-menu items disappearing upon hover if set to less than 5.
.nav {
width: 100%;
margin-left: -30px;
list-style-type: none;
text-align: center;
position: fixed;
top: 0;
z-index: 1000;
display: inline-block;
}
.nav li {
display: inline-block;
position: relative;
float: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
.nav li:hover {
background-color: #D1CA88;
font-weight: 500;
}
.nav li a {
display: inline-block;
margin: 5px 0;
text-decoration: none;
width: 150px;
line-height: 15px;
color: #000000;
}
.nav li a:hover {
background-color: #D1CA88;
font-weight: 500;
color: blue;
font-size: 18px;
}<ul class="nav">
<li><a href="#">Contact Us</a>
<ul>
<li><a href="/contact_us.html">Staff</a></li>
<li><a href="/contact_us.html#council">Council</a></li>
<li><a href="/registration/input1.php">Registration Form</a></li>
<li><a href="/map_and_directions.html">Map and Directions</a></li>
</ul>
</li>
</ul>Is there a way to eliminate the background color for top-level items without gaps showing in the sub-menu items' background or making the sub-menu items disappear on hover?