Jon Dough Jon Dough - 2 months ago 8
CSS Question

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.

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

Thank you in advance

EDIT: Thanks for your answers the problem is resolved. thank you all for your help and answers

Answer

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>I N F 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>