Css 悬停列表项时，菜单消失
当我在1000px模式下悬停在汉堡包图标上时，菜单出现，但当我悬停在菜单上时，它消失了。我尝试过z-索引和与位置相关的技巧，但无法获得解决方案。 问题出现在1000px，因为在全屏模式下，我可以将鼠标悬停在子菜单上，但不能在1000px屏幕上。 请帮忙，谢谢Css 悬停列表项时，菜单消失,css,sass,flexbox,css-selectors,css-position,Css,Sass,Flexbox,Css Selectors,Css Position,当我在1000px模式下悬停在汉堡包图标上时，菜单出现，但当我悬停在菜单上时，它消失了。我尝试过z-索引和与位置相关的技巧，但无法获得解决方案。 问题出现在1000px，因为在全屏模式下，我可以将鼠标悬停在子菜单上，但不能在1000px屏幕上。 请帮忙，谢谢 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <m
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ESPN</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./app.css">
</head>
<body>
<header class="header">
<div class="header__logo"><span>ESPN</span> / Media Distribution</div>
<div class="hamburger__icon__section">
</div>
<nav class="navbar">
<div class="navbar__items">
<div class="hamburger__icon"><div></div><div></div><div></div></div>
<ul class="navbar__lists__items">
<li class="navbar__hover__items">
<a href="#">Sports Programming</a>
<ul class="navbar__lists__items__item">
<li><a href="#">Boxing</a></li>
<li><a href="#">Films</a></li>
<li><a href="#">Fina</a></li>
<li><a href="#">World Athletics</a></li>
<li><a href="#">Ncaa</a></li>
<li><a href="#">Pocker</a></li>
<li><a href="#">Special Olympics</a></li>
<li><a href="#">X Games</a></li>
</ul>
</li>
<li class="navbar__hover__items"><a href="#">Content Calender</a></li>
<li class="navbar__hover__items">
<a href="#">Contacts</a>
<ul class="navbar__lists__items__item">
<li><a href="#">Asia Pacific</a></li>
<li><a href="#">Canada</a></li>
<li><a href="#">Europe, Middle East and Africa</a></li>
<li><a href="#">Latin America</a></li>
<li><a href="#">Mexico</a></li>
</ul>
</li>
</ul>
<div class="search">
<input type="text" placeholder="Search">
<i class="fa fa-search"></i>
</input>
</div>
</div>
</nav>
</header>
<div class="video__section">
<div class="video__header__wrapper">
<video src="./6. Exercise Higher Order Functions.mp4" loop="true" autoplay="true" muted>
</video>
</div>
<div class="video__section__content">
<p><span>ESPN /</span> Media Distribution</p>
</div>
</div>
<div class="image__section">
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
</div>
<div class="copyright__section">
<div class="copyright__section__content">
<p>Copyright © 2020 ESPN, Inc. - All Rights Reserved | Terms of Use | Privacy Policy</p>
</div>
</div>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
font-family: 'Fira Sans', sans-serif;
line-height: 1.6rem;
}
body {
font-size: 1.6rem;
}
.header {
display: flex;
justify-content: space-around;
align-items: stretch;
background-color:rgb(202, 8, 19);
color: #fff;
border-bottom: 1px solid #fff;
}
.header__logo {
font-size: 20px;
line-height: 50px;
user-select: none;
}
.header__logo span {
font-style: oblique;
}
.navbar__items {
display: flex;
justify-content: center;
align-items: stretch;
}
.navbar__lists__items {
display: flex;
justify-content: center;
align-items: stretch;
list-style: none;
}
.navbar__lists__items > li {
margin: 0 5px;
}
.navbar__lists__items__item {
width: 250px;
opacity: 0;
pointer-events: none;
position: absolute;
top: 59px;
left: 0px;
right: 0;
list-style: none;
transition: all 0.3s;
}
.navbar__lists__items__item li {
cursor: pointer;
border: 1px solid #666;
background-color: #fff;
line-height: 1.6rem;
}
.navbar__lists__items__item li a:hover {
background-color: #666666;
color: #fff;
}
.navbar__lists__items__item li a {
padding: 10px 20px;
display: block;
text-decoration: none;
color: #666666;
text-transform: uppercase;
}
.navbar__hover__items {
display: flex;
justify-content: center;
align-items: stretch;
position: relative;
line-height: 50px;
z-index: 1;
}
.navbar__hover__items > a {
margin-right: 5px;
}
.navbar__lists__items .navbar__hover__items:nth-child(odd)::after {
content: ' \02C5';
}
.navbar__lists__items > li > a {
text-decoration: none;
color: #fff;
text-transform: uppercase;
}
.navbar__hover__items:nth-child(2n+1):hover > a {
background-color: #fff;
color: rgb(202, 8, 19);
}
.navbar__hover__items:nth-child(2n+1):hover .navbar__lists__items__item {
opacity: 1;
pointer-events: all;
transform: translateY(-10px);
}
.search {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.search input {
border: 1px solid #fff;
outline: none;
border-radius: 5px;
padding: 5px;
}
.search i {
position: absolute;
color: #000;
top: 50%;
left: 95%;
transform: translate(-95%, -50%);
margin-right: -30px;
}
.video__section {
width: 100%;
height: 100%;
position: relative;
color: #fff;
font-size: 40px;
}
.video__header__wrapper {
width: 100%;
height: 100%;
}
.video__header__wrapper video {
width: 100%;
height: 100%;
}
.video__section__content {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -40%);
user-select: none;
}
.video__section__content span {
font-style: oblique;
}
.image__section {
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
.image__section .image {
flex-basis: 25%;
overflow: hidden;
position: relative;
height: 200px;
width: 150px;
}
.image__section .image img {
width: 100%;
height: 100%;
cursor: pointer;
transform: scale(1.1);
transition: all 0.3s;
}
.overlay {
position: absolute;
right: 0;
left: 0;
bottom: 100%;
background-color: #000;
width: 100%;
overflow: hidden;
opacity: 0.7;
transition: 0.3s ease;
}
.image:hover img {
transform: scale(1);
}
.image:hover > .overlay {
height: 100%;
bottom: 0;
}
.copyright__section {
font-size: 10px;
background-color: rgb(202, 8, 19);
color: #fff;
}
.copyright__section__content {
margin-top: 0;
margin-bottom: 0;
margin-left: 30px;
}
@media (max-width: 1000px) {
.header {
padding: 0 10px;
}
.navbar__items {
position: relative;
}
.navbar__lists__items {
display: none;
position: absolute;
top: 50px;
right: 50px;
width: 300px;
padding: 0 10px;
background-color: #fff;
font-family: 'Lato',Helvetica,Arial,Lucida,sans-serif;
z-index: 1;
box-shadow: 0 0 0.5px 1px rgb(255, 255, 255, 0.7);
}
.navbar__lists__items > li > a {
color: #000;
}
.navbar__lists__items .navbar__hover__items:nth-child(odd)::after {
content: "";
display: block;
}
.navbar__hover__items {
display: block;
color: #000;
}
.navbar__lists__items__item {
display: none;
}
.video__section {
font-size: 35px;
}
.search {
height: 50px;
}
.hamburger__icon__section {
display: flex;
justify-content: flex-end;
flex: 2;
}
.hamburger__icon {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
margin-right: 10px;
cursor: pointer;
}
.hamburger__icon > div {
width: 25px;
height: 2px;
margin: 3px 0;
background-color: #fff;
}
.hamburger__icon:hover + .navbar__lists__items {
display: block;
}
}
ESPN
ESPN/媒体发行
ESPN/媒体发行
版权所有©2020 ESPN，Inc.-保留所有权利|使用条款|隐私政策
@导入url（'https://fonts.googleapis.com/css2?family=Fira+SAN:wght@600&显示=交换'；
* {
保证金：0；
填充：0；
框大小：边框框；
}
html{
字体大小：62.5%；
字体系列：“Fira Sans”，无衬线；
线高：1.6雷姆；
}
身体{
字体大小：1.6rem；
}
.标题{
显示器：flex；
证明内容：周围的空间；
对齐项目：拉伸；
背景色：rgb（202,8,19）；
颜色：#fff；
边框底部：1px实心#fff；
}
.header__标志{
字体大小：20px；
线高：50px；
用户选择：无；
}
.header__标志跨度{
字体风格：斜体；
}
.navbar_uu项目{
显示器：flex；
证明内容：中心；
对齐项目：拉伸；
}
.navbar\uuuu列出了\uuuu项{
显示器：flex；
证明内容：中心；
对齐项目：拉伸；
列表样式：无；
}
.navbar\uuuu列出\uuuuu项>li{
利润率：0.5px；
}
.navbar\uuuuuu列出了\uuuuu项\uuuuu项{
宽度：250px；
不透明度：0；
指针事件：无；
位置：绝对位置；
顶部：59px；
左：0px；
右：0；
列表样式：无；
过渡：均为0.3秒；
}
.navbar\uuuuu列出\uuuuu项\uuuuuu项li{
光标：指针；
边框：1px实心#666；
背景色：#fff；
线高：1.6雷姆；
}
.navbar\uuuuu列出\uuuuu项\uuuuuuu项li a:悬停{
背景色：#666666；
颜色：#fff；
}
.navbar\uuuuuu列出了\uuuuuu项\uuuuuuuuuu项li a{
填充：10px 20px；
显示：块；
文字装饰：无；
颜色：#666666；
文本转换：大写；
}
.navbar\uuuu悬停\uuu项{
显示器：flex；
证明内容：中心；
对齐项目：拉伸；
位置：相对位置；
线高：50px；
z指数：1；
}
.navbar\uuuu悬停\uuuuu项目>a{
右边距：5px；
}
.navbar\列出\项。navbar\悬停\项：第n个子项（奇数）：：之后{
内容：'\02C5'；
}
.navbar\uuu列出\uuuu项>li>a{
文字装饰：无；
颜色：#fff；
文本转换：大写；
}
.navbar\uuuu悬停\uuuu项：第n个子项（2n+1）：悬停>a{
背景色：#fff；
颜色：rgb（202,8,19）；
}
.navbar\uuuuu悬停\uuu项：第n个子项（2n+1）：悬停。navbar\uuuu列出\uuuu项\uuuu项{
不透明度：1；
指针事件：全部；
转换：translateY（-10px）；
}
.搜索{
位置：相对位置；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.搜索输入{
边框：1px实心#fff；
大纲：无；
边界半径：5px；
填充物：5px；
}
.搜索一{
位置：绝对位置；
颜色：#000；
最高：50%；
左：95%；
转换：翻译（-95%，-50%）；
右边距：-30px；
}
.视频部分{
宽度：100%；
身高：100%；
位置：相对位置；
颜色：#fff；
字体大小：40px；
}
.video\uuuu头文件\uuuuu包装{
宽度：100%；
身高：100%；
}
.video\uuuu标题\uuuu包装器视频{
宽度：100%；
身高：100%；
}
.视频部分内容{
位置：绝对位置；
最高：40%；
左：50%；
转换：翻译（-50%，-40%）；
用户选择：无；
}
.视频\uuuu节\uuuu内容范围{
字体风格：斜体；
}
.图像部分{
显示器：flex；
证明内容：中心；
柔性包装：包装；
对齐项目：居中；
}
.image\u部分。image{
弹性基准：25%；
溢出：隐藏；
位置：相对位置；
高度：200px；
宽度：150px；
}
.image\uu部分.图像img{
宽度：100%；
身高：100%；
光标：指针；
转换：比例（1.1）；
过渡：均为0.3秒；
}
.覆盖{
位置：绝对位置；
右：0；
左：0；
底部：100%；
背景色：#000；
宽度：100%；
溢出：隐藏；
不透明度：0.7；
过渡：0.3s；
}
.图片：悬停img{
变换：比例（1）；
}
.image:hover>.overlay{
身高：100%；
底部：0；
}
.版权及商标组{
字体大小：10px；
背景色：rgb（202,8,19）；
颜色：#fff；
, .navbar__lists__items:hover
.hamburger__icon:hover + .navbar__lists__items, .navbar__lists__items:hover {
display: block;
}