html - 展开子菜单时，菜单项会更改其在 html/css 菜单中的位置

Question

我有一个用 html/css 制作的简单菜单，我遇到的问题是，如果我将鼠标指针放在菜单项 (test2) 上以展开子菜单，那么菜单部分 (test1) 中的其他元素会改变它们的位置:https://jsfiddle.net/dsb87pxz/

<nav>
  <ul>
    <li>test1</li>
    <li>
      test2
      <ul>
        <li>test2.1</li>
        <li>test2.2</li>
      </ul>
    </li>
  </ul>
</nav>


nav > ul > li {
  display: inline-block;
}

nav > ul > li > ul {
    display: none;
}

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

nav > ul > li > ul > li {
  display: block;
}

你能为这个问题提出解决方案吗？

Answer 1

与 vertical-align: top

nav>ul>li {
  display: inline-block;
  vertical-align: top;
}

nav>ul>li>ul {
  display: none;
}

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

nav>ul>li>ul>li {
  display: block;
}

<nav>
  <ul>
    <li>test1</li>
    <li>
      test2
      <ul>
        <li>test2.1</li>
        <li>test2.2</li>
      </ul>
    </li>
    <li>
      test2
      <ul>
        <li>test2.1</li>
        <li>test2.2</li>
      </ul>
    </li>
  </ul>
</nav>

当您将鼠标悬停在第一级的列表项上时，它会影响右侧的列表项，因为 display: inline-block .

因此可以使用 float: left和 display: relative对于 <li>在第一级和display: absolute对于 <ul>在<li>里面.

示例

ul {
  list-style: none;
  padding: 0;
}

li {
  padding: 2px 5px;
}

nav>ul>li {
  float: left;
  position: relative;
}

nav>ul>li>ul {
  position: absolute;
  left: 0;
  display: none;
}

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

<nav>
  <ul>
    <li>test1</li>
    <li>
      test2
      <ul>
        <li>test2.1</li>
        <li>test2.2</li>
      </ul>
    </li>
    <li>
      test2
      <ul>
        <li>test2.1</li>
        <li>test2.2</li>
      </ul>
    </li>
  </ul>
</nav>