Member Avatar for ZeroEddy

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
  • 185 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Philippe.Lahaie

Dani AI

Generated

Most likely cause (what and were hinting at): the submenu is still in normal flow, so the navbar’s floats/inline layout move it away from its parent. The reliable fix is to make each top-level li a positioned container and absolutely position the child ul so the dropdown is placed relative to the parent item instead of the whole bar.

Concrete steps

  • Give each top-level li position: relative and use display: inline-block (not inline) so it forms a proper positioning context.
  • Make the submenu position: absolute; left: 0; top: 100% so it drops directly under its parent.
  • Make the anchor inside the li display: block with padding so the hover area is stable. This also avoids tiny fixed widths on the li, which can cause layout oddities.

Example CSS (adjust values to taste):

#navbar ul li { position: relative; display: inline-block; margin: 0; }
#navbar ul li > a { display: block; padding: 8px 12px; }
#navbar ul li > ul { position: absolute; left: 0; top: 100%; display: none; margin: 0; padding: 0; z-index: 999; }
#navbar ul li:hover > ul { display: block; }

About the disappearing gap (good catch ): that usually comes from borders/margins between the parent and submenu. Remove margins on the submenu, or nudge it up by 1px (top: calc(100% - 1px) or margin-top: -1px) to bridge a border. Troubleshooting tips: use the browser devtools to inspect computed position/top/left, temporarily add contrasting backgrounds to see boxes, and check ancestors for overflow: hidden or unexpected z-index that can move or clip the menu.

Recommended Answers

All 8 Replies

Member Avatar for weekendrockstar

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 for teedoff

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

Member Avatar for ZeroEddy

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 for dantinkakkar

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 for ZeroEddy

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 for Philippe.Lahaie

looks good now, good job! :)

Member Avatar for Philippe.Lahaie

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.