html - 将鼠标悬停在子项上时防止 flexbox 列表项更改父项的宽度
问题描述
我有一系列列表项,有些有一个子列表,包含子导航链接。我正在使用 CSS 通过display: none
在孩子身上创建悬停效果<ul>
,然后display: block
在悬停时设置为。
然而,这具有使父级<li>
在悬停期间增长的不良影响。有没有办法防止这种情况?当悬停在<li>
没有子列表的项目上时,它们的宽度保持不变。
<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;
}
可运行示例:
解决方案
感谢@Temani Afif 和@Pete - 添加
positon: absolute;
top: 100%
关于孩子<ul>
已经解决了这个问题。谢谢 - 比我想象的要简单得多!
推荐阅读
- c - WinAPI - 如何在编辑控件中垂直居中文本?
- c# - 如何使用 Visual Studio 2019 x64 位修复 TFS 构建
- pytorch - 遇到 RuntimeError:梯度计算所需的变量之一已被就地操作修改
- sql-server - 如何从 varchar 列中获取数字并检查该值是否在范围内
- python - Sympy evalf() 关于狄拉克函数的积分
- javascript - 如何将此获取响应转换为字符串?
- swift - SwiftUI:可以访问祖先自定义`@EnvironmentObject`?如果是,如何?
- python-3.x - TypeError:'int' 对象不可调用 - 问题
- angular - Angular:本地化为多种语言
- data-warehouse - 数据仓库/湖中的单个与多个 ID 列