将鼠标悬停在子项上时，防止flexbox列表项更改父项的宽度 [英] Prevent flexbox list items changing width of parent when hover over children

问题描述

我有一系列列表项，有些有子列表，其中包含子导航链接。我使用CSS通过在子< ul> 上显示 display：none 来创建悬停效果，然后设置为 display：悬停时会阻止。

I have a series of list items and some have a child list, containing sub navigation links. I'm using CSS to create a hover effect by having display: none on the child <ul> and then setting to display: block when hovering.

但是，这样会产生使父级< li> 在悬停期间增长。有办法防止这种情况吗？将鼠标悬停在没有子列表的< li> 项目上时，其宽度保持不变。

However this has the undesired effect of making the parent <li> grow during hover. Is there a way to prevent this? When hovering over the <li> items that have no child lists then their width remains the same.

<ul class="flex unstyled-list">
  <li><a href="/">link</a></li>
  <li><a href="/" target="_blank">link 2</a></li>
  <li>
    <a href="/">parent 1</a>
    <ul class="unstyled-list">
      <li><a href="/">Hgdfgdf</a></li>
      <li><a href="/">Hgdfgdf</a></li>
    </ul>
  </li>
  <li>
    <a href="/">parent 2</a>
    <ul class="unstyled-list">
      <li><a href="/">Hgdfgdf gdf ggf dfs</a></li>
      <li><a href="/">Hgdfgdf gdf gdf gfd</a></li>
    </ul>
  </li>
</ul>


.unstyled-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.flex {
  width: 970px;
  height: 37px;
  display: flex;
  flex: 1 0 auto;
  flex-basis: 100%;
  background-color: #000;
}

.flex li {
  flex-grow: 1;
  height: 37px;
  line-height: 37px;
  color: #fff;
  text-align: center;
}

#nav-strip li:hover {
  background-color: #000;
}

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

.flex li a {
  display: block;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}

.flex li ul {
  display: none;
  width: 200px;
  padding: 0;
}

.flex li ul li {
  width: 185px;
  height: 30px;
  line-height: 30px;
  padding: 0 0 0 15px;
  background: #000;
  text-align: left;
}

.flex li ul li:hover {
  background: #1e1d3f;
}

.flex li ul li a {
  display: block;
  font-size: 12px;
  font-weight: normal;
}

可运行的示例：

https://jsfiddle.net/ndp1y79b/1/

推荐答案

感谢@Temani Afif和@Pete-添加

Thanks to @Temani Afif and @Pete - adding

positon: absolute;
top: 100%

已解决此问题。谢谢-比我想象的要简单得多！

on the child <ul> has fixed this issue. Thanks - much simpler than I thought it may have been!

这篇关于将鼠标悬停在子项上时，防止flexbox列表项更改父项的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！