HTML Menu items are displaying gaps

Question

I have two levels of menus. I'm trying to give my menu's a different look; I'm removing the background color from the top level menu items. To do this I altered the CSS class ".nav li". I commented out the "background-color" property. However, that gives me a problem with the sub-menu items. When I hover my cursor over one of the upper menu items and the corresponding sub-menu items appear, they are displaying with a 5px gap in between them. That comes from the "margin" property in the ".nav li a" class. If I reduce the value of the margin property to anything less than 5, I can't select any sub-menu item. They sub-menu items disappear when I hover over them.

.nav {
  width: 100%;
  /* Needed for menu to float and center.  Explicit PX doesn't work */
  margin-left: -30px;
  /*To accommodate the difference between page width and menu */
  list-style-type: none;
  /* no underscores, etc. */
  text-align: center;
  /* needed for menu to float and center. */
  position: fixed;
  /* used to render menu bar fixed on top and not scroll up */
  /* ALSO ALLOWS MENUS TO STAY ON TOP OF SLIDESHOW*/
  top: 0;
  /* used to render menu bar on top */
  z-index: 1000;
  /* use z-index to render menu bar on top of everything, even the slideshow */
  display: inline-block;
}

.nav li {
  display: inline-block;
  /* used to wrap text */
  position: relative;
  /* to enable items to "drop down" */
  float: none;
  /* needed for menu to float with risized window */
  /*background-color: #BDB76B; */
  /* menu background color */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
}

.nav li:hover {
  /* highlights current hovered list item when hovering over the parent menu */
  background-color: #D1CA88;
  font-weight: 500;
}

.nav li a {
  display: inline-block;
  /* used to wrap text */
  margin: 5px 0;
  /*space between menu elements Top, Right, Bottom, Left */
  text-decoration: none;
  width: 150px;
  /* this is the standard width of the menu items */
  line-height: 15px;
  /* this is the text height of the menu items */
  color: #000000;
  /* list item font color 000=black, FFF=white*/
}

.nav li a:hover {
  /* highlights hovered item of the parent menu */
  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>

How can I remove the background-color property for the top level items and still have no gaps display in the background for the sub-menu items and keep the sub-menu items displaying while I hover over them?

Brandon Brandon · Accepted Answer · 2021-08-30T16:25:17

Let me know if this is what you mean. Didn't fully understand the goal.

.nav {
    width: 100%;
    /* Needed for menu to float and center.  Explicit PX doesn't work */
    margin-left: -30px;
    /*To accommodate the difference between page width and menu */
    list-style-type: none;
    /* no underscores, etc. */
    text-align: center;
    /* needed for menu to float and center. */
    position: fixed;
    /* used to render menu bar fixed on top and not scroll up */
    /* ALSO ALLOWS MENUS TO STAY ON TOP OF SLIDESHOW*/
    top: 0;
    /* used to render menu bar on top */
    z-index: 1000;
    /* use z-index to render menu bar on top of everything, even the slideshow */
    display: inline-block;
  }
  
  .nav li {
    display: inline-block;
    /* used to wrap text */
    position: relative;
    /* to enable items to "drop down" */
    float: none;
    /* needed for menu to float with risized window */
    /*background-color: #BDB76B; */
    /* menu background color */
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
  }
  
.target:hover {
    /* highlights current hovered list item when hovering over the parent menu */
    background-color: #D1CA88;
    font-weight: 500;
  }
  
  .nav li a {
    display: inline-block;
    /* used to wrap text */
    margin: 5px 0;
    /*space between menu elements Top, Right, Bottom, Left */
    text-decoration: none;
    width: 150px;
    /* this is the standard width of the menu items */
    line-height: 15px;
    /* this is the text height of the menu items */
    color: #000000;
    /* list item font color 000=black, FFF=white*/
  }
  
  .nav li a:hover {
    /* highlights hovered item of the parent menu */
    background-color: #D1CA88;
    font-weight: 500;
    color: blue;
    /* font-size: 18px; */
  }

  <ul class="nav">
    <li><a href="#">Contact Us</a>
      <ul>
        <li class="target"><a href="/contact_us.html">Staff</a></li>
        <li class="target"><a href="/contact_us.html#council">Council</a></li>
        <li class="target"><a href="/registration/input1.php">Registration Form</a></li>
        <li class="target"><a href="/map_and_directions.html">Map and Directions</a></li>
      </ul>
    </li>
  </ul>

HTML Menu items are displaying gaps

2 Answers