3 Replies - 11243 Views - Last Post: 06 April 2012 - 10:29 PM

#1 psychatelli   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 09-March 12

Drop down menu is not aligned with the navigation bar?

Posted 05 April 2012 - 07:17 PM

HI community of dream.in.code.com, this is my first post ever. I hope this goes well. Thank you for looking over this issue with me. So, the issue here is that my drop down menu is not aligned with my navigation bar. This started as a result of adding margin: auto 120 to the #nav_bar ul. I added the margin so the bar would align to the center of my div. Adding the auto margin worked, but again the drop down menu did not align with the navigation bar.

<div id="nav_bar">
<ul id="menu">
  <li><a href="">Home</a></li>
      <li><a href="../Navigation bar links/controle_phase.html">Controle Phase</a>
        <ul>
        <li><a href="">Videos</a></li>
        <li><a href="">Blog</a></li>
        <li><a href="">Workout Routines</a></li>
        <li><a href="">Exercises</a></li>

        </ul>
      </li>
  <li><a href="../Navigation bar links/balance_phase.html">Balance Phase</a>
    <ul>
   <li><a href="">Videos</a></li>
        <li><a href="">Blog</a></li>
        <li><a href="">Workout Routines</a></li>
        <li><a href="">Exercises</a></li>
    </ul>
  </li>
  <li><a href="../Navigation bar links/energy_phase.html">Energy Phase</a>
    <ul>
    	<li><a href="">Videos</a></li>
     	<li><a href="">Blog</a></li>
        <li><a href="">Workout Routines</a></li>
        <li><a href="">Exercises</a></li>
    </ul>
  </li>
    <li><a href="../Navigation bar links/musle_building_phase.html">Building Phase</a>
     <ul>
        <li><a href="">Videos</a></li>
        <li><a href="">Blog</a></li>
        <li><a href="">Workout Routines</a></li>
        <li><a href="">Exercises</a></li>
      </ul>
     </li> 
  <li><a href="../Navigation bar links/strength_phase.html">Strength Phase</a>
     <ul>
         <li><a href="">Videos</a></li>
         <li><a href="">Blog</a></li>
         <li><a href="">Workout Routines</a></li>
         <li><a href="">Exercises</a></li>
      </ul>
   </li>
  
</ul>

</div>



/*Navigation */

#nav_bar { 
 height:30px; 
}
#nav_bar ul {
  font-family: Arial, Verdana;
  font-size: 14px;
  margin: auto 120;
  padding: 0;
  list-style: none;
}
#nav_bar ul li {
  display: block;
  position: relative;
  float: left;
}
#nav_bar li ul { display: none; }

#nav_bar ul li a {
  display: block;
  text-decoration: none;
  color: white;
  border-top: 1px solid #ffffff;
  padding: 5px 15px 5px 15px;
  background: black;
  margin-left: 1px;
  white-space: nowrap;
  
}
#nav_bar ul li a:hover { background: black; }

#nav_bar li:hover ul {
  display: block;
  position: absolute;

}

#nav_bar li:hover li {
  float: none;
  font-size: 11px;
}
#nav_bar li:hover a { background: #999;

}

#nav_bar li:hover li a:hover { background: #F00;  

}





Is This A Good Question/Topic? 0
  • +

Replies To: Drop down menu is not aligned with the navigation bar?

#2 xxxjj18   User is offline

  • D.I.C Head
  • member icon

Reputation: 53
  • View blog
  • Posts: 167
  • Joined: 30-November 11

Re: Drop down menu is not aligned with the navigation bar?

Posted 06 April 2012 - 09:49 AM

Instead of doing

margin: 120px auto;


You could use

margin: 0 auto;


This adds no extra margin to the #nav_bar ul and it also centers it within the div.

The reason that your #nav_bar ul is not aligned with the rest of #nav_bar is because the '120' in the margin that you declared adds extra space to the ul, as well as centering it.

So therefore, if you use the same margin auto technique but using 0px as the values, there will be no extra margin space and it will still be centered :)
Was This Post Helpful? 0
  • +
  • -

#3 psychatelli   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 09-March 12

Re: Drop down menu is not aligned with the navigation bar?

Posted 06 April 2012 - 09:53 PM

The only way my navigation bar will center is by adding the 120px to the auto margin. Not sure why this is, but this seems to be the only way it will center it self. As for lining up the drop down menu with the main navigation bar, I figured it out. I needed to add margin: auto -120; to #nav_bar ul ul li. Adding margin to the #nav_bar ul only manages the main navigation bar. Thanks for your help though!
Was This Post Helpful? 0
  • +
  • -

#4 rajesh.kakawat   User is offline

  • New D.I.C Head

Reputation: 5
  • View blog
  • Posts: 43
  • Joined: 03-January 11

Re: Drop down menu is not aligned with the navigation bar?

Posted 06 April 2012 - 10:29 PM

try this one
   #nav_bar li ul { 
	display: none;
	float: left;
	clear: none;
	margin: 0;
	width: auto;
	height: auto;			 
   }


Was This Post Helpful? 0
  • +
  • -

Page 1 of 1