html - 当视口缩小到导航项目分成两行的点时，导航和子菜单之间会产生间隙

Question

当视口是屏幕的全宽时，导航栏和子菜单完美对齐。但是，当我到达 720 像素时，导航项“Chinese Calendars”变为两行时，它会在导航栏和子菜单下拉菜单之间产生间隙。我试过移动代码并删除东西，但无法弄清楚。我试过float:right;，创建一个重叠而不是落在正下方。

* {
  font-family: arial, sans-serif;
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: black;
}

nav {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}

.nav {
  position: sticky;
  left: 0;
  background-color: rgba(255, 255, 255, .8);
  border-radius: 0px;
  border: none;
  width: 100%;
  padding: 10px 0;
  flex-direction: row;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.item {
  color: black;
  font-weight: bold;
  text-transform: capitalize;
  width: 25%;
  text-align: center;
}

.submenu {
  display: none;
  flex-wrap: wrap;
  margin-top: 29px;
  align-items: center;
  align-text: center;
  position: absolute;
  padding: 10px;
  font-size: small;
  left: 0;
  right: 0;
  text-transform: capitalize;
  z-index: 1;
  background-color: #2F4F4F;
  color: white;
  justify-content: left;
}

.submenu li {
  margin-left: 6%;
  width: 19%;
  padding: 5px;
}

.submenuActive {
  display: flex;
  cursor: pointer;
  align-items: center;
  flex-direction: row;
  justify-content: left;
  flex-wrap: wrap;
  flex: 1 1 calc(25% - 80px);
  color: black;
  background-color: rgba(255, 255, 255, .9);
}


/*.item.has-children:hover .submenu {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: left;
    flex-wrap: wrap;
    flex: 1 1 calc(25% - 80px);
    color: black;
    background-color: rgba(255,255,255,.8);
}*/

ul {
  list-style: none;
  padding: 0;
}

.logo {
  display: block;
  margin-top: 50px;
  margin-bottom: 25px;
}

.logo img {
  display: block;
  margin: auto;
  max-width: 70%;
}

<a class="logo" href="index.html">
  <img src="../../Images/Navigation/Intak Logo 40px High.png" alt="Home" />
</a>

<nav>
  <ul class="nav">
    <li class="item">
      <a href="../index.html">
        <img src="../../Images/Navigation/Intak Nav Mark -01.png" alt="Home" />
      </a>
    </li>
    <li class="item has-children"><a href="../Printing.html">Printing</a>
      <!--		<ul class="submenu">
				<li>Labels & Stickers</li>
				<li>Banners</li>
				<li>A-Frame</li>
				<li>Menu Boards</li>
				<li>Takeout Menus</li>
				<li>Business Cards</li>
				<li>Dine-In Menus</li>
				<li>Posters</li>
				<li>Envelopes</li>
				<li>Chinese Wedding Cards</li>
				<li>Flyers</li>
				<li>Letterheads</li>
				<li>Brochures</li>
				<li>Vinyl</li>
				<li>NCR Forms</li>
				<li>Catalogues</li>
			</ul> -->
    </li>
    <li class="item has-children"><a href="../Graphic Design.html">Graphic Design</a>
      <!--		<ul class="submenu">
				<li>Logo Design</li>
				<li>Ads/Flyers/Promotions</li>
				<li style="text-align: center;">Menu Boards<br>
					(Digital & Boards)</li>
				<li style="text-align: center;">Restaurant Menus<br>
					(Takeout & Dine-In)</li>
			</ul>-->
    </li>
    <li class="item has-children" style="color:#4D4D4D;">Chinese Calendars
      <ul class="submenu">
        <li><a href="Cane Wallscroll Calendars.html">Cane Wallscroll Calendars</a></li>
        <li><a href="Wall Calendars.html">Wall Calendars</a></li>
        <li><a href="Mini Calendars.html">Mini Calendars</a></li>
        <li><a href="Desk Calendars.html">Desk Calendars</a></li>
        <li><a href="Special Desk Calendars.html">Special Desk Calendars</a></li>
        <li><a href="Lucky Money Envelopes.html">Lucky Money Envelopes</a></li>
        <li><a href="More.html">More Calendars</a></li>
      </ul>
    </li>
    <!--		<li class="item"><a href="../FAQS.html">FAQS</a></li> -->
    <li class="item"><a href="../Contact Us.html">Contact Us</a></li>
  </ul>
</nav>

我需要它，所以无论视口大小如何，子菜单总是触摸导航栏

https://jsfiddle.net/nqjv3xs5/1/#&togetherjs=lgy6QvwL4g

大于 720 像素：

小于 720 像素：

标签： htmlcss