user4833581 user4833581 - 5 months ago 19
CSS Question

navbar submenu pushes content down

I have a navpar made by css but when show the navbar sub menu it pushes the content underneath down

This is a link to codepen with full code
https://codepen.io/muhamedhashem/pen/GqNQaE

image
enter image description here

html

<!DOCTYPE html>
<html>
<head>
<title> </title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">One</a></li>


<li>
<a href="#">
Two
<i class="fa fa-arrow-circle-down"></i>
</a>
<ul>
<li><a href="#">Two #1</a></li>
<li><a href="#">Two #2</a></li>
<li><a href="#">Two #3</a></li>
</ul>
</li>


<li>
<a href="#">
Three
<i class="fa fa-arrow-circle-down"></i>
</a>
<ul>
<li><a href="#">Three #1</a></li>
<li><a href="#">Three #2</a></li>
<li><a href="#">Three #3</a></li>
</ul>
</li>


<li>
<a href="#">
Four
<i class="fa fa-arrow-circle-down"></i>
</a>
<ul>
<li><a href="#">#1</a></li>
<li><a href="#">#2</a></li>
<li><a href="#">#3</a></li>
<li><a href="#">#4</a></li>
</ul>
</li>


<li>
<a href="#">
Five
<i class="fa fa-arrow-circle-down"></i>
</a>
<ul>
<li><a href="#">Five #1</a></li>
<li><a href="#">Five #2</a></li>
<li><a href="#">Five #3</a></li>

</ul>
</li>
</ul>
</div>
<h1> ghjgjh ftfytf fytftyt drdtr rdetrert retretr ee45e ertetr rdrttr retret tdret </h1>
<h1> ghjgjh ftfytf fytftyt drdtr rdetrert retretr ee45e ertetr rdrttr retret tdret </h1>
<h1> ghjgjh ftfytf fytftyt drdtr rdetrert retretr ee45e ertetr rdrttr retret tdret </h1>
<h1> ghjgjh ftfytf fytftyt drdtr rdetrert retretr ee45e ertetr rdrttr retret tdret </h1>


</body>
</html>


css

.nav {
width:900px;
margin: 0 auto}

ul{
margin: 0;
padding: 0;
list-style-type:none;
text-align:center;}


ul li{
float:left;
width:180px;}






li ul{ display:none;}

li:hover ul{
display:block;}




ul li a{
display:block;
padding: 5px 15px 5px 15px;
background:#69F;
color:#ffffff;

border-top: 1px solid #FFF;
margin-left:1px;}



ul li a:hover{
background:#F80;
color:#fff}


h1 {
clear:both;
}

Answer

This is because the navbar itself is growing in height. If you want the navbar to overlap the content, look into z-index and absolute display.

li:hover ul{
  position:absolute;
  z-index: 10; //can be any number higher than the content's z-index.
  width: 180px; //This controls the size of the dropdowns container
  display:block;
}
Comments