gpt4 book ai didi

css - 子菜单在 Flexbox 中消失

转载 作者:太空宇宙 更新时间:2023-11-04 08:23:03 25 4
gpt4 key购买 nike

当我尝试将站点导航添加到 flexbox 布局中时,子菜单变得无法访问了。当鼠标离开父列表元素时,它们就会消失。

最终目标是通过使用flexbox使导航固定。如果 body- 和 header-tag 被遗漏了,导航就会像预期的那样工作。对此有什么想法吗?

* {
margin: 0;
padding: 0;
}

body {
display: flex;
flex-direction: column;
}

header {
flex: 0 0 auto;
background: yellow;
}

.site-navigation {
font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
font-weight: 400;
color: #666;
}

nav ul {
background: none;
display: flex;
flex-direction: column;
}

nav ul li {
list-style-type: none;
background: none;
}

nav ul li:hover {
background: none;
}

nav ul li a {
padding: 0.8rem 1rem;
display: block;
text-decoration: none;
color: rgba(100, 100, 100, 0.8);
background: none;
text-transform: uppercase;
font-size: 12px;
}

.has-children:hover>a {
border: 1px solid #e5e5e5;
border-bottom: none;
background: #fff;
margin-left: -1px;
margin-right: -1px;
margin-top: -1px;
color: #000;
}

.has-children:hover>ul {
border: 1px solid #e5e5e5;
position: relative;
z-index: -1;
}

.has-children:hover>ul>li {
padding: 15px 15px;
}

.has-children>ul>li>a {
text-transform: none;
color: #666;
border-bottom: 1px solid #E5E5E5;
padding: 0;
padding-bottom: 15px;
}

.has-children>ul>li:hover>a {
border-bottom: 2px solid #d00;
color: #000;
padding-bottom: 14px;
}

@media only screen and (min-width:680px) {
nav ul {
flex-direction: row;
}
nav ul li {
position: relative;
flex: 0 0 auto;
text-align: left;
}
nav ul li:hover ul {
display: flex;
flex-direction: column;
}
.has-children ul {
display: none;
position: absolute;
top: 100%;
}
.has-children:hover ul {
display: block;
position: absolute;
top: calc( 100% - 1px);
width: 150%;
}
}
<header class="site-header">
<nav class="site-navigation">
<ul class="site-navigation__list">
<li class="site-navigation__item"><a href="/">Item 1</a>
</li>
<li class="site-navigation__item has-children"><a href="/">Item 2<span class="arrow arrow-down"></span></a>
<ul class="site-navigation__sub-list">
<li class="site-navigation__sub-item"><a href="#">Subitem 1</a></li>
<li class="site-navigation__sub-item"><a href="#">Subitem 2</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<div class="content"><p>Content goes here!</p></div>

最佳答案

好像是z-index和背景的问题。

您可以使用 position:relative 重置 z-index 并添加 background 到子菜单以隐藏重叠的内容。

可以完成的 CSS 更新:

nav ul {
position:relative;
z-index:1
}
nav ul li:hover > ul{
background: white;
}

* {
margin: 0;
padding: 0;
}

body {
display: flex;
flex-direction: column;
}

header {
flex: 0 0 auto;
background: yellow;
}

.site-navigation {
font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
font-weight: 400;
color: #666;
}

nav ul {
background: none;
display: flex;
flex-direction: column;
}

nav ul {
position:relative;
z-index:1
}
nav ul li:hover > ul{
background: white;
}

nav ul li ,nav ul li:hover{
list-style-type: none;
background: none;
}



nav ul li a {
padding: 0.8rem 1rem;
display: block;
text-decoration: none;
color: rgba(100, 100, 100, 0.8);
background: none;
text-transform: uppercase;
font-size: 12px;
}

.has-children:hover>a {
border: 1px solid #e5e5e5;
border-bottom: none;
background: #fff;
margin-left: -1px;
margin-right: -1px;
margin-top: -1px;
color: #000;
}

.has-children:hover>ul {
border: 1px solid #e5e5e5;
position: relative;
z-index: -1;
}

.has-children:hover>ul>li {
padding: 15px 15px;
}

.has-children>ul>li>a {
text-transform: none;
color: #666;
border-bottom: 1px solid #E5E5E5;
padding: 0;
padding-bottom: 15px;
}

.has-children>ul>li:hover>a {
border-bottom: 2px solid #d00;
color: #000;
padding-bottom: 14px;
}

@media only screen and (min-width:680px) {
nav ul {
flex-direction: row;
}
nav ul li {
position: relative;
flex: 0 0 auto;
text-align: left;
}
nav ul li:hover ul {
display: flex;
flex-direction: column;
}
.has-children ul {
display: none;
position: absolute;
top: 100%;
}
.has-children:hover ul {
display: block;
position: absolute;
top: calc( 100% - 1px);
width: 150%;
}
}
<header class="site-header">
<nav class="site-navigation">
<ul class="site-navigation__list">
<li class="site-navigation__item"><a href="/">Item 1</a>
</li>
<li class="site-navigation__item has-children"><a href="/">Item 2<span class="arrow arrow-down"></span></a>
<ul class="site-navigation__sub-list">
<li class="site-navigation__sub-item"><a href="#">Subitem 1</a></li>
<li class="site-navigation__sub-item"><a href="#">Subitem 2</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<div class="content"><p>Content goes here!</p></div>

另一个更新可能是在鼠标悬停时显示子菜单?

.has-children>ul {
display:none;
}
.has-children:hover>ul {
display:block;
}

https://codepen.io/anon/pen/MvKqqE

关于css - 子菜单在 Flexbox 中消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45399887/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com