Question

我有一个用html / css制作的简单菜单，我遇到的问题是如果我将鼠标指针放在菜单项（test2）上以展开子菜单，那么菜单部分（test1）中的其他项目会改变它们的位置：{{ 3}}

<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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

因此，可以在第一级float: left使用display: relative和<li>，在display: absolute内使用<ul> <li>。

示例

＆＃13;
＆＃13;
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; }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

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

这是真的，您只需要将vertical-align top添加到inline-block元素li这里的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*/ }。

{{1}}

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

4 个答案: