Hey Guys
I seem to be havingsome small problem with my navigation bar. When ever I hover over the members tab the drop down list appears way over to the right. Does anyone know how I can fix this. Ill post my css below.
Thanks in Advance Edmond.

#navbar{
	width:900px;
	float:right;
	padding-top:0px;
	font-size:15px;
	background-color:#000;
}
#navbar > ul{
	list-style-type:none;
	float:right;
	padding-right:20px;
	
	
	
}
#navbar > ul > li{
	width:30px;
	display:inline;	
	border:1px solid #666;
	text-align:center;
}
#navbar > ul > li > ul{
	display:none;
	list-style:none;
	margin:0;
	padding:0;	
}
#navbar > ul > li:hover ul{
	display:block;	
}

Recommended Answers

All 8 Replies

Hmm I am not sure that I see the problem here without the HTML that creates the navigation and/or being able to see it actually in action. The only thing I can think of based upon the CSS you posted could be the float right which forces whichever element you place it on to float as far in the horizontal direction you specify as far as it can within the container housing it. Since I am not sure what the actual nav bar looks like or how it is set up it is it is hard to give anything concrete. But since you aren't using positioning there isn't anything in any of those classes to specify WHERE any of the elements should be other than that the whole nav division is 900px. The float attribute in the nav class looks to be the only thing element that tells anything to be in a specific place.

We need a link to your site, since other page elements can also affect how your page renders.

Here is the html for the nav bar.
It is placed to the right side of the header and looks well but whenever I hover over the members tab it changes completely. I want the list to drop down right under the member tab but it doesent. Hope this makes it a more clear picture.
Edmond

<div id="navbar">
  <ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">About Us</a></li>
   <li><a href="#">Members</a>
    <ul>
     <li><a href="#">ZeroValve</a></li>
     <li><a href="#">True_To_The_End</a></li>
     <li><a href="#">NickValve</a></li>
    </ul>
   </li>
   <li><a href="#">Game Progress</a></li>
   <li><a href="#">Videos</a></li>
   <li><a href="#">Contact</a></li>
  </ul>
 </div><!--End of navbar div-->

Do you have it uploaded somewhere? If you do, I can help you better. If you can not do it immediately, don't. I'll review your code afterwards! :)

A link is better anyday, however.

I got something working there. If you could still want to check the link posted above and let me know is it done correctly. Cheers Edmond

looks good now, good job! :)

i just noticed one little problem, theres a small margin between the initial menu and the popup menu that appears under, if you move quick its not a problem, but if you move very slowly you will eventually mouse over the gap and the popup disappears.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.