每当我将鼠标悬停在我的NavList上时，底部列表会将宽度添加到顶部

Question

我的第一个ul的宽度等于margin-right = 50px的单词的宽度，我的底部ul宽度= 200px。问题是如果顶部ul宽度是180px并且我悬停在它上面，顶部ul匹配底部200px，这增加右侧并推动列表。

＆＃13;

＆＃13;

nav {
  width: 100%;
  height: 50px;
  background-color: #d60d8c;
}

.navbar-tab {
  margin: auto;
  width: 1300px;
}

ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
  font-family: arial;
}

.navbar-tab-1 {
  padding-right: 50px;
}

ul li {
  list-style: none;
  height: 50px;
  display: inline-block;
  font-family: 'Raleway', sans-serif;
  font-size: 19px;
  font-weight: 400;
  line-height: 50px;
  float: left;
}

ul li a {
  text-decoration: none;
  color: black;
  display: block;
}

ul li ul li {
  display: none;
}

ul li:hover ul li {
  display: block;
}

.hover-list li {
  font-size: 15px;
  background-color: #e2e2e2;
  width: 200px;
  text-indent: 20px;
}

＆＃13;

<nav id="navbar">
  <ul class="navbar-tab">
    <li class="navbar-tab-1">Home</li>
    <li class="navbar-tab-1">Diamond Search
      <ul class="hover-list">
        <a>
          <li>GIA Diamond Search</li>
        </a>
        <a>
          <li>Diamonds</li>
        </a>
      </ul>
    </li>
    <li class="navbar-tab-1">Wedding Bands</li>
    <li class="navbar-tab-1">Engagement Rings</li>
    <li class="navbar-tab-1">Selection Guide</li>
    <li class="navbar-tab-1">Jewellery Services</li>
  </ul>
</nav>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以为包含子菜单的ul元素提供绝对位置，以防止它影响父级的宽度：

.hover-list {
  position: absolute;
}

nav {
  width: 100%;
  height: 50px;
  background-color: #d60d8c;
}

.navbar-tab {
  margin: auto;
  width: 1300px;
}

ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
  font-family: arial;
}

.navbar-tab-1 {
  padding-right: 50px;
}

ul li {
  list-style: none;
  height: 50px;
  display: inline-block;
  font-family: 'Raleway', sans-serif;
  font-size: 19px;
  font-weight: 400;
  line-height: 50px;
  float: left;
}

ul li a {
  text-decoration: none;
  color: black;
  display: block;
}

ul li ul li {
  display: none;
}

ul li:hover ul li {
  display: block;
}

.hover-list li {
  font-size: 15px;
  background-color: #e2e2e2;
  width: 200px;
  text-indent: 20px;
}

.hover-list {
  position: absolute;
}

<nav id="navbar">
  <ul class="navbar-tab">
    <li class="navbar-tab-1">Home</li>
    <li class="navbar-tab-1">Diamond Search
      <ul class="hover-list">
        <a>
          <li>GIA Diamond Search</li>
        </a>
        <a>
          <li>Diamonds</li>
        </a>
      </ul>
    </li>
    <li class="navbar-tab-1">Wedding Bands</li>
    <li class="navbar-tab-1">Engagement Rings</li>
    <li class="navbar-tab-1">Selection Guide</li>
    <li class="navbar-tab-1">Jewellery Services</li>
  </ul>
</nav>

另外，我建议在ul li，ul li a或ul li ul li等标记选择器上使用类选择器。与类选择器相比，标签选择器不仅具有稍差的性能，而且它们也适用于更多元素 - 有时当您不打算使用它们时 - 就像您有另一个ul一样页面中列出了一些不相关项目的元素。