css菜单里李氏之间神秘的鸿沟

Question

我有一个悬停导航菜单，通过我的自定义wordpress主题产生，在下拉菜单的li之间有一个差距，我不知道它是从哪里来的。将页边距和填充设置为0并不能消除它。一开始我还以为这是一条边界，但事实并非如此。诊断起来有点困难，因为我使用wordpress函数将菜单带进来，所以我无法编辑html。我附上了一张图片，空白存在，例如“博客”和“如何”之间的空白。任何帮助都是非常感谢的。

编辑:添加HTML。这个html是由wordpress生成的，我使用的唯一类是site-nav。有点丑。

<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在.子菜单中用顶部调整:13，在您的情况下留下1 1px的空间

要删除这个空间，您可以为所有菜单项提供1 1px的空白，只需放置此css即可。

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