展开子菜单时，菜单项会在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> 

Answer 2

您可以像这样向您的悬停元素添加position：absolute

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

Answer 3

您可以像这样向您的悬停元素添加position：absolute

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

Answer 4

没错，您只需要在此处的li标签的inline-block元素中添加vertical-align作为top 。

display:inline-block默认情况下将其块文本与baseline对齐，这就是为什么当用户将hover在上述代码中时，它将text与基线对齐，即vertical-align:baseline因此将其更改为vertical-align:top 。

nav > ul > li{
  display: inline-block;
  vertical-align:top; /*Just add this as already suggested*/
}