I got problems with my navbar, because when i hover the mouse to the navbar all of the dropdown menus shows can anyone help me to fix these?
Here’s my code
<!DOCTYPE html>
<html>
<head>
<title>AD Varus</title>
</head>
<style>
html{
background:url(../drop/pics/heart.jpg);background-repeat:no-repeat;background-size:100% 1500px;
padding:5px 60px 5px 60px;
}
body{
background:white;
height:1050px;
}
.container{
}
.image img{
width:80%;
height:400px;
padding-left:125px;padding-right:165px;padding-top:30px;
}
.nav_top ul li:hover ul{
display:block;
list-style:none;
}
.nav_top{
margin-bottom:20px;
width:100%;
padding-left:300px;
height:60px;line-height:60px;
}
.nav_top li{
list-style:none;
float:left;
}
.nav_top a{
display:block;
text-decoration:none;
color:white;
padding:0 30px;
background:orange;
margin-left:10px;
}
.nav_top a:hover,.nav_top li.current a{
background:blue;
}
#lol hr{
margin-left:30px;
margin-right:30px;
height:5px;
}
.nav_left{
float:left;
background:orange;
list-style:none;
width:20%;
padding-top:0;
height:250px;
margin-left:30px;
padding-bottom:10px;
}
.nav_left ul{
background:orange;
}
.nav_left li{
border-bottom:0 solid black;
list-style:none;
}
.nav_left a{
display:block;
padding-top:20px;
color:white;
text-decoration:none;
padding-left:5px;
padding-bottom:10px;
}
.nav_left a:hover,.nav_left li.current a{
background:blue;
}
.par{
float:right;
width:75%;
background:orange;
margin-right:20px;
margin-left:0 auto;
height:500px;
}
.par p{
font-size:3em;
margin-left:10px;
}
.par #pb{
font-size:1em;
margin-left:10px;
}
</style>
<body>
<div class="container">
<!--IMAGE-->
<div class="image">
<img src="../drop/pics/vayne.jpg"></img>
</div>
<div class="nav_top">
<ul>
<li><a href="#">Guide</a>
<ul>
<li><a href="#">Mid</a></li>
<li><a href="#">Adc</a></li>
<li><a href="#">Top</a></li>
</ul></li>
<li><a href="#">Mastery</a>
<ul>
<li><a href="#">Fevor</a></li>
<li><a href="#">Thunderlord</a></li>
<li><a href="#">Warlord</a></li>
</ul> </li>
<li><a href="#">Skins</a>
<ul>
<li><a href="#">Heartseeker</a></li>
<li><a href="#">Arclight</a></li>
<li><a href="#">Soulstealer</a></li>
</ul> </li>
<li><a href="#">Abilities</a>
<ul>
<li><a href="#">Q</a></li>
<li><a href="#">W</a></li>
<li><a href="#">E</a></li>
<li><a href="#">R</a></li>
</ul></li>
<li><a href="#">Lores</a>
<ul>
<li><a href="#">Part 1</a></li>
<li><a href="#">Part 2</a></li>
</ul></li>
</ul>
</div>
<div id="lol">
<hr>
<div class="nav_left">
<li><a href="#">Home</a>
<ul>
<li><a href="#">200</a></li>
<li><a href="#">403</a></li>
</ul></li>
<li><a href="#">Menu Item</a>
<ul>
<li><a href="#">IE</a></li>
<li><a href="#">BRK</a></li>
<li><a href="#">PD</a></li>
<li><a href="#">SV</a></li>
</ul></li>
<li><a href="#">Spells</a>
<ul>
<li><a href="#">Flash</a></li>
<li><a href="#">Heal</a></li>
<li><a href="#">Ignite</a></li>
</ul></li>
<li><a href="#">Champions</a>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
</ul></li>
<li><a href="#">Esports</a>
<ul>
<li><a href="#">SKT</a></li>
<li><a href="#">TSM</a></li>
<li><a href="#">GOM</a></li>
<li><a href="#">FDT</a></li>
</ul> </ul> </li>
</div>
<div class="par">
<p>'AD Carry Vayne'</p>
<p id="pb">Vayne the most sakit adr when taba2</p>
</div>
</div>
</div>
</body>
</html>