Problems in Drop Down Navigational Bar

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>

It’s hard to tell on my phone but I’m pretty sure you have some errors in your html. Try validating your code and fixing that first.

Hi,

You don’t seem to have te hover rules set up correctly as you need to hide the nested ul and then show them on hover. Also you want them removed from the flow with positoin:absolute otherwise they jump into the flow and cause the page to jump up and down and reflow.

Here is just your top menu with the relevant working code in place.

<!DOCTYPE html>
<html>
<head>
<title>AD Varus</title>
</head>
<style>
.nav_top {
	margin-bottom:20px;
	padding-left:300px;
	height:60px;
	line-height:60px;
}
.nav_top ul{margin:0;padding:0;list-style:none}
.nav_top li {
	float:left;
	margin-left:10px;
	position:relative;
}
.nav_top a {
	display:block;
	text-decoration:none;
	color:white;
	padding:0 30px;
	background:orange;
	white-space:nowrap;
}
.nav_top a:hover, .nav_top li.current a {
	background:blue;
}
.nav_top li:hover > a{background:blue;}
.nav_top li ul{position:absolute;left:-999em;border:1px solid #000;box-shadow:5px 5px 10px rgba(0,0,0,0.5);}
.nav_top li ul li{float:none;line-height:30px;margin:0;}
.nav_top li:hover > ul{left:0;top:100%;}
</style>
<body>
<div class="container">
  <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>
</body>
</html>

Play with that until you understand how it works and then apply the same processes to your other menus (except you will want your side menu to slide out to the right hand side and not underneath so you would use left:100% and top:0 on hover).

THANK YOU!! it helped me a lot
now i understand how it works!!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.