子列表元素导致父ul之间的差距

Question

我正在创建带有子菜单的简单导航。

我希望submenu ul的宽度为139px（因此，在悬停时，下拉框的宽度将为139px）。但是，当我设置此值时，它也会在父链接之间造成间隙。

例如：

在此示例中，两个链接之间的宽度很好，但是当您将鼠标悬停在products链接上时，可以看到products和blog之间的间隙。

即使子菜单进入博客li的区域，也可以。暂时尝试消除差距。

.main_menu>div ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
}

.main_menu>div ul li {
  display: inline-block;
  vertical-align: middle;
  line-height: 1em;
  padding: 1.2em 0.9em;
  font-weight: 500;
  color: #333;
  border-radius: 25%;
  cursor: pointer;
}


/* showing dropdown on parent hover */

.item-has-children .menu-children-wrapper {
  border: 1px solid red;
  height: auto;
  background-color: #fff;
  flex-direction: column!important;
  display: none;
}

.item-has-children:hover ul {
  display: block;
  width: 139px;
}

<div class="main_menu">
  <div class="menu_container">
    <ul>
      <li class="item-has-children"><a href="#">Products ▾</a>
        <ul class="menu-children-wrapper">
          <li class="menu-item"><a href="#">Link 1</a></li>
          <li class="menu-item"><a href="#">Link 2</a></li>
          <li class="menu-item"><a href="#">Link 3</a></li>
        </ul>
      </li>
      <li class="menu-item"><a href="#">Blog</a></li>
    </ul>
  </div>
</div>

Answer 1

您需要在打开ul时添加绝对位置。希望对您有帮助

.main_menu>div ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
}

.main_menu>div ul li {
  display: inline-block;
  vertical-align: middle;
  line-height: 1em;
  padding: 1.2em 0.9em;
  font-weight: 500;
  color: #333;
  border-radius: 25%;
  cursor: pointer;
}


/* showing dropdown on parent hover */

.item-has-children .menu-children-wrapper {
  border: 1px solid red;
  height: auto;
  background-color: #fff;
  flex-direction: column!important;
  display: none;
}

.item-has-children:hover ul {
  display: block;
  width: 139px;
  position:absolute;
}

<div class="main_menu">
  <div class="menu_container">
    <ul>
      <li class="item-has-children"><a href="#">Products ▾</a>
        <ul class="menu-children-wrapper">
          <li class="menu-item"><a href="#">Link 1</a></li>
          <li class="menu-item"><a href="#">Link 2</a></li>
          <li class="menu-item"><a href="#">Link 3</a></li>
        </ul>
      </li>
      <li class="menu-item"><a href="#">Blog</a></li>
    </ul>
  </div>
</div>