1,105,633 Community Members

Navigation Drop Down Problem!

Member Avatar
ZeroEddy
Light Poster
26 posts since Oct 2011
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

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;	
}
Member Avatar
weekendrockstar
Junior Poster in Training
71 posts since Dec 2010
Reputation Points: 12 [?]
Q&As Helped to Solve: 16 [?]
Skill Endorsements: 0 [?]
 
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.

Member Avatar
teedoff
Practically a Master Poster
605 posts since Jul 2010
Reputation Points: 3 [?]
Q&As Helped to Solve: 60 [?]
Skill Endorsements: 0 [?]
 
0
 

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

Member Avatar
ZeroEddy
Light Poster
26 posts since Oct 2011
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
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-->
Member Avatar
dantinkakkar
Junior Poster
174 posts since Aug 2011
Reputation Points: 19 [?]
Q&As Helped to Solve: 22 [?]
Skill Endorsements: 4 [?]
 
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.

Member Avatar
ZeroEddy
Light Poster
26 posts since Oct 2011
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

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

Member Avatar
ZeroEddy
Light Poster
26 posts since Oct 2011
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
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

Member Avatar
Philippe.Lahaie
Posting Whiz
376 posts since Oct 2007
Reputation Points: 42 [?]
Q&As Helped to Solve: 60 [?]
Skill Endorsements: 9 [?]
 
0
 

looks good now, good job! :)

Member Avatar
Philippe.Lahaie
Posting Whiz
376 posts since Oct 2007
Reputation Points: 42 [?]
Q&As Helped to Solve: 60 [?]
Skill Endorsements: 9 [?]
 
0
 

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.

You
This article has been dead for over three months: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: