CSS dropdown menu doesn't display when link is hovered
Question
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.
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;
}
Thank you in advance
EDIT: Thanks for your answers the problem is resolved. thank you all for your help and answers
4 answers
solution1
1 2016-09-29 07:56:00
All you need to do is add position:relative; to 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
solution2
1 ACCPTED 2016-09-29 07:56:33
Add position: relative; to .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>solution3
0 2016-09-29 08:38:28
Add relative position to parent li using position:relative;
nav ul li{
display: flex;
flex-wrap: wrap;
flex: 1;
text-align: center;
background: #5d5d5d;
position:relative;
}
solution4
-1 2016-09-29 07:55:49
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,
nav ul li a:hover {
color: white;
background: #00c308;
}
Edit: I hope I didn't missunderstand your question :)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
CSS Menu doesn't dropdown when it's hovered
Change CSS dropdown menu color when any child is hovered
CSS Dropdown-menu not displaying when <li>-element is hovered.
dropdown menu not appearing when hovered
CSS3 dropdown menu doesn't work in IE when included
Css button doesn't respond when hovered over
Why doesn't this dropdown menu display properly?
CSS Dropdown menu doesn't work in IE 8
html && CSS - dropdown menu doesn't appear
Dropdown menu not showing the listed elements when hovered
Related Tags