Question

我有一个悬停导航菜单，通过我的自定义wordpress主题生成，下拉菜单中的li之间有差距，我不知道它来自哪里。设置边距和填充为0并没有摆脱它。起初我还认为这是一个边界，但事实并非如此。它有点难以诊断，因为我使用wordpress功能来输入菜单，所以我无法编辑html。我附上了一张图片，这个空白存在于一个空白区域，例如“＃34; blog＆＃34;和＆＃34;如何＆＃34;。任何帮助表示赞赏。

编辑：添加了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里面.sub-menu调整为top：13，留出1px的空间情况下

要删除此空间，您可以为所有菜单项提供1px的误差，只需将此css

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

在css菜单中li之间的神秘差距

1 个答案: