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
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;
}
Aucun commentaire:
Enregistrer un commentaire