html - CSS菜单中li之间的神秘差距

Question

我有一个悬停导航菜单，它是通过我的自定义 wordpress 主题生成的，它在下拉菜单中的 li 之间有一个空隙，我不知道它是从哪里来的。将 margin 和 padding 设置为 0 并不能消除它。一开始我也以为是边界，其实不是。它有点难以诊断，因为我正在使用 wordpress 功能来引入菜单，所以我无法编辑 html。我附上了一张图片，间隙以空白形式存在，例如在“博客”和“如何”这两个词之间。任何帮助表示赞赏。

编辑:添加了 HTML。这个 html 是由 wordpress 生成的，我使用的唯一类是站点导航。有点丑。

<nav class="site-nav col col--lg-7  col--xl-9">
     <?php wp_nav_menu(); ?>
</nav>

/* site nav */

.site-nav {
  position: absolute;
  bottom: 0;
  left: 0;
  -webkit-transform: translate(40%, -65%);
          transform: translate(40%, -65%);
  font-size: 1.2rem;

}

.site-nav::after {
    content: "";
    clear: both;
    display: table;
  }

.site-nav a {
    color: rgb(46, 198, 218);
    text-decoration: none;
    width: 100%;
  }

.site-nav a:hover {
    color: #FF00A2;
  }

.site-nav ul {
   margin: 0;
   padding: 0;

  }

.site-nav ul li {
     list-style: none;
     float: left;
      position: relative;
      margin-left: 4%;
    }

.site-nav ul li a {
        padding: 0 15px;
      }

.site-nav ul li:first-child {
      margin-left: 0;
    }

.site-nav .sub-menu {
    display: block;
    margin: 0;
    padding: 0;
    position: absolute;

  }

.site-nav .sub-menu li {
      display: block;
      min-width: 10.5rem;

      padding: 15px 0;
      background-color: #414141;
      margin: 0;
      border-radius: 0 0 4px 4px;
      position: relative;
      top: 13px;
    }

.site-nav .sub-menu li a:hover {
        color: rgb(46, 198, 218);
      }

.site-nav .sub-menu li:hover {
      background-color: #FF00A2;
    }

.site-nav .menu-item:hover .sub-menu {
      display: block;
    }

HTML

<nav class="site-nav col col--lg-7  col--xl-9">
   <div class="menu-primary-container">
      <ul id="menu-primary" class="menu">
         <li id="menu-item-51" class="center menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-51">
            <a href="http://localhost:3000">Home</a>
            <ul class="sub-menu">
               <li id="menu-item-56" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-56"><a href="//localhost:3000/blog/">Blog</a></li>
               <li id="menu-item-54" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-54"><a href="//localhost:3000/how-to/">How To</a></li>
            </ul>
         </li>
         <li id="menu-item-58" class="center menu-item menu-item-type-post_type_archive menu-item-object-product menu-item-has-children menu-item-58">
            <a href="//localhost:3000/products/">Shop</a>
            <ul class="sub-menu">
               <li id="menu-item-73" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-73"><a href="//localhost:3000/baseball/">Baseball</a></li>
               <li id="menu-item-74" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-74"><a href="//localhost:3000/football/">Football</a></li>
            </ul>
         </li>
         <li id="menu-item-53" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-53"><a href="//localhost:3000/rules-and-terms/">Rules and Terms</a></li>
         <li id="menu-item-67" class="center menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-67">
            <a href="//localhost:3000/about-us/">About us</a>
            <ul class="sub-menu">
               <li id="menu-item-84" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-84"><a href="//localhost:3000/contact-2/">Contact</a></li>
            </ul>
         </li>
         <li id="menu-item-83" class="center menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-83">
            <a href="//localhost:3000/special-events/">Special Events</a>
            <ul class="sub-menu">
               <li id="menu-item-85" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-85"><a href="//localhost:3000/super-bowl/">Super Bowl</a></li>
            </ul>
         </li>
         <li id="menu-item-52" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-52"><a href="//localhost:3000/account/">Account</a></li>
      </ul>
   </div>
</nav>

Answer 1

li inside .sub-menu adjust with top:13 that leave space of 1px in your case

要删除此空间，您可以为所有菜单项提供 1px 的负边距，只需放置此 css

.site-nav .sub-menu li{
    margin-bottom: -1px !important;
 }