We're a community of 1077K IT Pros here for help, advice, solutions, professional growth and fun. Join us!
1,076,379 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Start New Discussion Reply to this Discussion

Navigation Drop Down Problem!

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;	
}
5
Contributors
8
Replies
1 Day
Discussion Span
1 Year Ago
Last Updated
9
Views
ZeroEddy
Newbie Poster
16 posts since Oct 2011
Reputation Points: 10
Solved Threads: 0
Skill Endorsements: 0

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.

weekendrockstar
Junior Poster in Training
71 posts since Dec 2010
Reputation Points: 25
Solved Threads: 16
Skill Endorsements: 0

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

teedoff
Practically a Master Poster
605 posts since Jul 2010
Reputation Points: 21
Solved Threads: 60
Skill Endorsements: 0

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-->
ZeroEddy
Newbie Poster
16 posts since Oct 2011
Reputation Points: 10
Solved Threads: 0
Skill Endorsements: 0

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.

dantinkakkar
Junior Poster
177 posts since Aug 2011
Reputation Points: 49
Solved Threads: 22
Skill Endorsements: 3

Hey guys here is the link to the page
http://elitegroup.atspace.eu/

ZeroEddy
Newbie Poster
16 posts since Oct 2011
Reputation Points: 10
Solved Threads: 0
Skill Endorsements: 0

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

ZeroEddy
Newbie Poster
16 posts since Oct 2011
Reputation Points: 10
Solved Threads: 0
Skill Endorsements: 0

looks good now, good job! :)

Philippe.Lahaie
Posting Whiz
360 posts since Oct 2007
Reputation Points: 103
Solved Threads: 54
Skill Endorsements: 4

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.

Philippe.Lahaie
Posting Whiz
360 posts since Oct 2007
Reputation Points: 103
Solved Threads: 54
Skill Endorsements: 4

This article has been dead for over three months: Start a new discussion instead

Post: Markdown Syntax: Formatting Help
 
You
View similar articles that have also been tagged:
 
© 2013 DaniWeb® LLC
Page rendered in 0.3194 seconds using 2.78MB