html - 如何修复我的导航栏悬停的宽度？

Question

美好的一天!每当我悬停时，上方都会有一个空间。如果您查看 jsfiddle，您会发现并非所有内容都已悬停。看起来不太好。我试图将 margin-top:0 放在 .show-menu 中，但它不起作用。我的代码中必须添加或更改什么？所有帮助将不胜感激。

https://jsfiddle.net/view02/jfcboyw3/1/

a:hover, a:visited, a:link, a:active {
  text-decoration: none;
  color: white;
}

#wrap {
  max-width: 100%; /* Spans the width of the page */
  height: 40px;
  /* margin-left:50px;
  margin-right: 50px;*/
  margin: 0 auto; /* Ensures there is no space between sides of the screen and the menu */
  z-index: 99; /* Makes sure that your menu remains on top of other page elements */
  position: relative; 
  background-color: #D00000;
  text-align: center;
  display: flex;
  justify-content: center;
  padding-top: 14px;
}

/*#wrap ul li:hover a:hover { background-color:black;  height: 40px; 
}*/

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: absolute; 
}

/*Create a horizontal list with spacing*/
ul li {
  display: inline-block;
  /* margin-left: 90px;*/
  margin-top: -5px;
  margin-right: 1px;
  height: 100%;
}

/*Style for menu links*/
li a {
  display: block;
  min-width: 140px;
  height: 40px;
  text-align: center;
  line-height: 50px;
  font: bold 2.00vw Helvetica, Sans-Serif;
  color: #fff;
  background: #d00000;
  text-decoration: none;
  line-height: 20px;
}

/*Hover state for top level links*/
ul li:hover a {
  background-color: black;
  height: 40px;
  bottom: 10px;
  top: -105%;
  display: block;
}

/*Style for dropdown links*/
li:hover ul a {
  background: #d00000;
  color: white;
  height: 40px;
  line-height: 40px;
}

/*Hover state for dropdown links*/
li:hover ul a:hover {
  background: black;
  color: #fff;
}

/*Hide dropdown links until they are needed*/
li ul {
  display: none;
}

/*Make dropdown links vertical*/
li ul li {
  display: block;
  float: none;
}

/*Prevent text wrapping*/
li ul li a {
  width: auto;
  min-width: 100px;
  padding: 0 20px;
}

/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
  display: block;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
  font: bold 2.00vw Helvetica, Sans-Serif;
  text-decoration: none;
  color: #fff;
  background: #d00000;
  text-align: center;
  padding-top: 10 px;
  margin-top: 0;
  display: none;
}

/*Hide checkbox*/
input[type=checkbox] {
  display: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu {
  display: block;
}

/*Responsive Styles*/
@media screen and (max-width : 760px) {
  /*Make dropdown links appear inline*/
  ul {
    position: static;
    display: none;
  }
  /*Create vertical spacing*/
  li {
    margin-bottom: 1px;
  }
  /*Make all menu links full width*/
  ul li, li a {
    width: 100%;
  }
  /*Display 'show menu' link*/
  .show-menu {
    display: block;
  }
}

ul li { margin-top:-1px;}

<div id="wrap">
  <label for="show-menu" class="show-menu">Show Menu</label>
  <input type="checkbox" id="show-menu" role="button">
  <ul id="menu">
    <li class="selected"><a href="home.html">Home</a></li>
    <li>
      <a href="#">Cars</a>
      <ul class="hidden">
        <li><a href="cars.html">Categories</a></li>
        <li><a href="faqs.html">FAQs</a></li>
      </ul>
    </li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</div>

Answer 1

从#wrap中移除顶部填充并调整a标签的line-height

a:hover, a:visited, a:link, a:active {
  text-decoration: none;
  color: white;
}
#wrap	{
  max-width: 100%; /* Spans the width of the page */
  height: 40px;
  /* margin-left:50px;
  margin-right: 50px;*/
  margin: 0 auto; /* Ensures there is no space between sides of the screen and the menu */
  z-index: 99; /* Makes sure that your menu remains on top of other page elements */
  position: relative; 
  background-color: #D00000;
  text-align: center;
  display:flex;
  justify-content: center;

  /*padding-top:14px;*/
}

/*#wrap ul li:hover a:hover { background-color:black;  height: 40px; 
}*/

ul {
  list-style-type:none;
  margin:0;
  padding:0;
  position: absolute;
}

/*Create a horizontal list with spacing*/
ul li {
  display:inline-block;
  margin:0px !important;
  height:100%;
}
/*Style for menu links*/
li a {
  display:block;
  min-width:140px;
  height: 40px;
  text-align: center;
  font: bold 2.00vw Helvetica, Sans-Serif;
  color: #fff;
  background: #d00000;
  text-decoration: none;
  line-height: 38px;
}
/*Hover state for top level links*/
ul li:hover a{
  background-color: black;
  height: 40px;
  bottom:10px;
  top:-105%;
  display: block;
}
/*Style for dropdown links*/
li:hover ul a {
  background: #d00000;
  color: white;
  height: 40px;
  line-height: 40px;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
  background: black;
  color: #fff;
}
/*Hide dropdown links until they are needed*/
li ul {
  display: none;
}
/*Make dropdown links vertical*/
li ul li {
  display: block;
  float: none;
}
/*Prevent text wrapping*/
li ul li a {
  width: auto;
  min-width: 100px;
  padding: 0 20px;
}
/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
  display: block;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
  font: bold 2.00vw Helvetica, Sans-Serif;
  text-decoration: none;
  color: #fff;
  background: #d00000;
  text-align: center;
  padding-top: 10	px;
  margin-top: 0;
  display: none;
}

/*Hide checkbox*/
input[type=checkbox]{
  display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
  display: block;
}
/*Responsive Styles*/
@media screen and (max-width : 760px){
  /*Make dropdown links appear inline*/
  ul {
      position: static;
      display: none;
  }
  /*Create vertical spacing*/
  li {
      margin-bottom: 1px;
  }
  /*Make all menu links full width*/
  ul li, li a {
      width: 100%;
  }
  /*Display 'show menu' link*/
  .show-menu {
      display:block;
  }
}

<div id="wrap">
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
  <ul id="menu">
    <li class="selected"><a href="home.html">Home</a></li>
    <li>
        <a href="#">Cars</a>
        <ul class="hidden">
            <li><a href="cars.html">Categories</a></li>
            <li><a href="faqs.html">FAQs</a></li>
        </ul>
    </li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</div>