html - 当鼠标光标离开导航父项时子菜单消失
问题描述
当我将光标放在导航项上时,会出现子菜单,然后当我移动鼠标单击子菜单中的某些内容时,子菜单就会消失。
我在stackoverflow上阅读了一些类似的问题,例如更改z-index,对我不起作用
* {
font-family: arial, sans-serif;
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
.nav {
position: fixed;
top: 0;
left: 0;
background-color: rgba(255, 255, 255, .8);
border-radius: 0px;
border: none;
width: 100%;
margin: 0;
padding: 25px 0;
flex-direction: row;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.item {
color: black;
font-weight: bold;
text-transform: uppercase;
}
.submenu {
display: none;
flex-wrap: wrap;
align-items: center;
align-text: center;
position: absolute;
top: 107px;
padding: 10px;
left: 0;
right: 0;
text-transform: uppercase;
z-index: 1;
background-color: #2F4F4F;
color: white;
justify-content: space-evenly;
}
.submenu li {
margin-left: 6%;
width: 19%;
padding: 5px;
}
.item.has-children:hover .submenu {
display: flex;
align-items: center;
flex-direction: row;
justify-content: space-evenly;
padding: 10;
flex-wrap: wrap;
flex: 1 1 calc(25% - 80px);
color: black;
background-color: rgba(255, 255, 255, .8);
}
ul {
list-style: none;
padding: 0;
}
<nav>
<ul class="nav">
<li class="item">
<a href="../index.html">
<img src="../Images/Navigation/Intak Logo 25px High.png" alt="Home" />
</a>
</li>
<li class="item has-children" style="color:#4D4D4D;">Printing
<ul class="submenu">
<li>Labels & Stickers</li>
<li>Banners</li>
<li>A-Frame</li>
<li>Menu Boards</li>
<li>Takeout Menus</li>
<li>Business Cards</li>
<li>Dine-In Menus</li>
<li>Posters</li>
<li>Envelopes</li>
<li>Chinese Wedding Cards</li>
<li>Flyers</li>
<li>Letterheads</li>
<li>Brochures</li>
<li>Vinyl</li>
<li>NCR Forms</li>
<li>Catalogues</li>
</ul>
</li>
<li class="item has-children">Graphic Design
<ul class="submenu">
<li>Logo Design</li>
<li>Ads/Flyers/Promotions</li>
<li style="text-align: center;">Menu Boards<br> (Digital & Boards)</li>
<li style="text-align: center;">Restaurant Menus<br> (Takeout & Dine-In)</li>
</ul>
</li>
<li class="item has-children">Chinese Calendars
<ul class="submenu">
<li>Cane Wallscroll Calendars</li>
<li>Wall Calendars</li>
<li>Mini Calendars</li>
<li>Desk Calendars</li>
<li>Special Desk Calendars</li>
<li>Red Packet Calendars</li>
<li>More Calendars</li>
<li></li>
</ul>
</li>
<li class="item">FAQS</li>
<li class="item">Contact Us</li>
</ul>
</nav>
当我将光标放在导航项目上时,它应该一直显示子菜单,直到我移动导航弹性项目的光标
解决方案
问题是你top
对你的.submenu
班级有价值。这会造成您在技术上没有“悬停”在菜单或子菜单上的空白。解决此问题的最佳方法是使用padding
而不是top
将子菜单推低,同时在技术上仍然让它覆盖空白空间。
例子:
* {
font-family: arial, sans-serif;
box-sizing: border-box;}
html, body {
margin: 0;
padding: 0;
}
.nav {
background-color: #ccc;
position:fixed;
top:0;
left:0;
/*background-color: rgba(255,255,255,.8);*/
border-radius: 0px;
border: none;
width: 100%;
margin: 0;
/*padding: 25px 0;*/
flex-direction: row;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.item {
color: black;
font-weight: bold;
text-transform: uppercase;
display: flex;
align-items: center;
height: 100%;
}
.submenu {
display: none;
flex-wrap: wrap;
align-items: center;
align-text: center;
position: absolute;
top: 100%;
padding: 10px;
left: 0;
right: 0;
text-transform: uppercase;
z-index: 1;
background-color: #2F4F4F;
color: white;
justify-content: space-evenly;
}
.submenu li {
margin-left: 6%;
width: 19%;
padding: 5px;
}
.item.has-children:hover .submenu {
display: flex;
align-items: center;
flex-direction: row;
justify-content: space-evenly;
padding: 10;
flex-wrap: wrap;
flex: 1 1 calc(25% - 80px);
color: black;
background-color: rgba(255,255,255,.8);
}
ul {
list-style: none;
padding: 0;
height: 100px;
}
<nav>
<ul class="nav">
<li class="item">
<a href="../index.html">
<img src="../Images/Navigation/Intak Logo 25px High.png" alt="Home" />
</a>
</li>
<li class="item has-children" style="color:#4D4D4D;">Printing
<ul class="submenu">
<li>Labels & Stickers</li>
<li>Banners</li>
<li>A-Frame</li>
<li>Menu Boards</li>
<li>Takeout Menus</li>
<li>Business Cards</li>
<li>Dine-In Menus</li>
<li>Posters</li>
<li>Envelopes</li>
<li>Chinese Wedding Cards</li>
<li>Flyers</li>
<li>Letterheads</li>
<li>Brochures</li>
<li>Vinyl</li>
<li>NCR Forms</li>
<li>Catalogues</li>
</ul>
</li>
<li class="item has-children">Graphic Design
<ul class="submenu">
<li>Logo Design</li>
<li>Ads/Flyers/Promotions</li>
<li style="text-align: center;">Menu Boards<br>
(Digital & Boards)</li>
<li style="text-align: center;">Restaurant Menus<br>
(Takeout & Dine-In)</li>
</ul>
</li>
<li class="item has-children">Chinese Calendars
<ul class="submenu">
<li>Cane Wallscroll Calendars</li>
<li>Wall Calendars</li>
<li>Mini Calendars</li>
<li>Desk Calendars</li>
<li>Special Desk Calendars</li>
<li>Red Packet Calendars</li>
<li>More Calendars</li>
<li></li>
</ul>
</li>
<li class="item">FAQS</li>
<li class="item">Contact Us</li>
</ul>
</nav>
推荐阅读
- aws-codebuild - CodeBuild 无法运行 CDK 合成器
- python - 根据其他列的两个条件创建新列
- conda - 如何解决 conda 环境中的 PyLint“导入”缺陷?
- css - 如何修复悬停冲突并在 ReactJS 自动完成中输入事件?
- amazon-web-services - 如何获取带有元数据的 S3 对象版本?
- html - 如何反转这个 SCSS 动画?
- python-3.x - 如何从 Dockerfile 运行环境初始化 shell 脚本
- swift - 直接将 Firebase Firestore 与移动客户端一起使用是否足够安全?如何避免恶意请求和超出限制的过多请求?
- docker - 如何在docker上正确设置alsa dummy?
- jquery - 如何缩短数据 URI 以将其作为参数传递给打印机?