[英]CSS dropdown menu doesn't display when link is hovered
I have a bit of a problem with my pure CSS dropdown menu, when I add CSS properties to the footer and the container div the sub menu doesn't stay displayed.我的纯 CSS 下拉菜单有点问题,当我向页脚和容器 div 添加 CSS 属性时,子菜单不会保持显示。
I don't really know how I can correct this problem, I've tried looking for answers on google but I can't find any answer that'll fix my problem.我真的不知道如何解决这个问题,我试过在谷歌上寻找答案,但找不到任何可以解决我的问题的答案。
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: OpenSans, Noto, Helvetica Neue, Helvetica, Tahoma, Arial, FreeSans, sans-serif;
}
header {
position: relative;
width: 100%;
height: 110px;
background: #505050;
padding: 5px;
}
#logo {
position: absolute;
width: 100px;
height: 100px;
background: #00c308;
padding: 5px;
padding-top: 55px;
color: white;
font-weight: bold;
font-size: 12px;
}
nav {
display: flex;
justify-content: center;
border-top: 1px #D1D1D1 solid;
position: static;
width: 100%;
height: 50px;
background: #5d5d5d;
box-shadow: 0px 3px 3px grey;
}
#menu {
display: flex;
flex-wrap: wrap;
width: 100%;
max-width: 1080px;
}
nav ul {
display: flex;
max-width: 1080px;
width: 100%;
height: 49px;
list-style: none;
}
nav ul li {
display: flex;
flex-wrap: wrap;
flex: 1;
text-align: center;
background: #5d5d5d;
}
nav ul li a {
box-sizing: content-box;
padding: 11px 0px;
width: 100%;
font-family: "Segoe UI", "Helvetica Neue";
text-decoration: none;
color: #EEEEEE;
font-size: 20px;
font-weight: 100;
}
.sous_menu {
display: none;
max-width: 1080px;
width: 100%;
background: white;
box-shadow: 0px 0px 10px grey;
}
.sous_menu a {
color: black;
}
.sous_menu a:hover {
background: #00ce08;
}
nav ul li a:hover {
color: white;
background: #00c308;
}
nav ul li:hover>.sous_menu {
display: flex;
flex-direction: column;
}
#container {
display: flex;
margin-left: auto;
margin-right: auto;
max-width: 1080px;
width: 100%;
background: red;
min-height: 700px;
}
footer {
height: 100px;
width: 100%;
background: #505050;
}
here is the jsfiddle link这是jsfiddle链接
Thank you in advance先感谢您
EDIT: Thanks for your answers the problem is resolved.编辑:感谢您的回答问题已解决。 thank you all for your help and answers谢谢大家的帮助和解答
All you need to do is add position:relative;
您需要做的就是添加position:relative;
to nav ul li
: nav ul li
:
*{ box-sizing: border-box; margin: 0; padding: 0; font-family: OpenSans,Noto,Helvetica Neue,Helvetica,Tahoma,Arial,FreeSans,sans-serif; } header{ position:relative; width: 100%; height: 110px; background: #505050; padding: 5px; } #logo{ position: absolute; width: 100px; height: 100px; background: #00c308; padding: 5px; padding-top: 55px; color: white; font-weight: bold; font-size: 12px; } nav{ display: flex; justify-content: center; border-top: 1px #D1D1D1 solid; position: static; width: 100%; height: 50px; background: #5d5d5d; box-shadow: 0px 3px 3px grey; } #menu{ display: flex; flex-wrap: wrap; width: 100%; max-width: 1080px; } nav ul{ display: flex; max-width: 1080px; width: 100%; height: 49px; list-style: none; } nav ul li{ display: flex; flex-wrap: wrap; flex: 1; text-align: center; background: #5d5d5d; position:relative; } nav ul li a{ box-sizing: content-box; padding: 11px 0px; width:100%; font-family: "Segoe UI","Helvetica Neue" ; text-decoration: none; color: #EEEEEE; font-size: 20px; font-weight: 100; } .sous_menu{ display: none; max-width: 1080px; width: 100%; background: white; box-shadow: 0px 0px 10px grey; } .sous_menu a{ color: black; } .sous_menu a:hover{ background: #00ce08; } nav ul li a:hover{ color: white; background: #00c308; } nav ul li:hover>.sous_menu{ display: flex; flex-direction: column; } #container{ display:flex; margin-left: auto; margin-right: auto; max-width: 1080px; width: 100%; background: red; min-height: 700px; } footer{ height: 100px; width: 100%; background: #505050; }
<body> <header> <div id="logo">T <br>N <br>INF O</div> </header> <nav> <div id="menu"> <ul> <li> <a href="#">Ordinateurs</a> <div class="sous_menu"> <a href="#">PC de Bureau</a> <a href="#">PC Portables</a> <a href="#">Accessoires</a> </div> </li> <li> <a href="#">Peripheriques</a> <div class="sous_menu"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </li> <li> <a href="#">Hardware</a> <div class="sous_menu"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </li> <li> <a href="#">Software</a> <div class="sous_menu"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </li> </ul> </div> </nav> <div id="container"> <div id="news"> </div> </div> <footer> </footer>
Also, your br
tags have the slash in the wrong place - they should be after the br
此外,您的br
标签在错误的位置有斜线 - 它们应该在br
Add position: relative;
添加position: relative;
to .sous_menu
到.sous_menu
*{ box-sizing: border-box; margin: 0; padding: 0; font-family: OpenSans,Noto,Helvetica Neue,Helvetica,Tahoma,Arial,FreeSans,sans-serif; } header{ position:relative; width: 100%; height: 110px; background: #505050; padding: 5px; } #logo{ position: absolute; width: 100px; height: 100px; background: #00c308; padding: 5px; padding-top: 55px; color: white; font-weight: bold; font-size: 12px; } nav{ display: flex; justify-content: center; border-top: 1px #D1D1D1 solid; position: static; width: 100%; height: 50px; background: #5d5d5d; box-shadow: 0px 3px 3px grey; } #menu{ display: flex; flex-wrap: wrap; width: 100%; max-width: 1080px; } nav ul{ display: flex; max-width: 1080px; width: 100%; height: 49px; list-style: none; } nav ul li{ display: flex; flex-wrap: wrap; flex: 1; text-align: center; background: #5d5d5d; } nav ul li a{ box-sizing: content-box; padding: 11px 0px; width:100%; font-family: "Segoe UI","Helvetica Neue" ; text-decoration: none; color: #EEEEEE; font-size: 20px; font-weight: 100; } .sous_menu{ display: none; position: relative; max-width: 1080px; width: 100%; background: white; box-shadow: 0px 0px 10px grey; } .sous_menu a{ color: black; } .sous_menu a:hover{ background: #00ce08; } nav ul li a:hover{ color: white; background: #00c308; } nav ul li:hover>.sous_menu{ display: flex; flex-direction: column; } #container{ display:flex; margin-left: auto; margin-right: auto; max-width: 1080px; width: 100%; background: red; min-height: 700px; } footer{ height: 100px; width: 100%; background: #505050; }
<body> <header> <div id="logo">T</br>N</br>INF O</div> </header> <nav> <div id="menu"> <ul> <li> <a href="#">Ordinateurs</a> <div class="sous_menu"> <a href="#">PC de Bureau</a> <a href="#">PC Portables</a> <a href="#">Accessoires</a> </div> </li> <li> <a href="#">Peripheriques</a> <div class="sous_menu"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </li> <li> <a href="#">Hardware</a> <div class="sous_menu"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </li> <li> <a href="#">Software</a> <div class="sous_menu"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </li> </ul> </div> </nav> <div id="container"> <div id="news"> </div> </div> <footer> </footer>
Add relative position to parent li
using position:relative;
使用position:relative;
将相对位置添加到父li
position:relative;
nav ul li{
display: flex;
flex-wrap: wrap;
flex: 1;
text-align: center;
background: #5d5d5d;
position:relative;
}
All you need is to add this: nav ul li:hover > a,
When hovering the li
, the first anchor gets highlighted as well.您只需要添加以下内容: nav ul li:hover > a,
当悬停li
,第一个锚点也会突出显示。
nav ul li:hover > a,
nav ul li a:hover {
color: white;
background: #00c308;
}
Edit: I hope I didn't missunderstand your question :)编辑:我希望我没有误解你的问题:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.