Member Avatar for bsewell

Hi,
I am making a horizontal menu system for a website. So, I have looked at examples of css menu's before I attempted my own.

So, right now the menu is working top level-wise up until it spots my UL tag inside of my LI. My problem is that the colors is working, but it is not lining up to the top level. So in the screenshot I attached, Jobs should be under Candidates. Instead, it's gone to the next line.

How do I fix the position problem for my nested ul?

<ul class="nav">
<li><a href="">Home</a></li>
<li><a href="">Active Candidates</a></li>
<li><a href="">Candidates</a>
<ul><li><a href="">Jobs<a href=""></li></ul>
</li>
<li><a href="">Contact Us</a></li>
</ul>
ul.nav, ul.nav ul
{
	display:block;
	list-style: none;
	margin: 0;
	padding: 0;
	background-color:#000000;
	height:12px;	
}

ul.nav li a, ul.nav ul li a
{
	text-decoration:none;
	color:#00ff33;	
}

ul.nav li
{
	display:inline;
}

ul.nav li a:hover, ul.nav ul li a:hover
{
	background-color:#d20001;
	color:#000000;	
}

Cheers

screenshot.png 2.25 KB
Edited by bsewell because: n/a
  • 3 Contributors
  • 2 Replies
  • 292 Views
  • 20 Hours Discussion Span
  • Latest Post Latest Post by drjohn

Dani AI

Generated

Two things are most likely causing the submenu to drop to the next line in ’s example: a malformed HTML anchor inside the nested list (an <a> tag is not closed), and CSS that leaves the submenu in normal flow (inline list items plus a fixed height on the top UL). The reliable pattern for dropdowns is: keep the parent LI positioned (position:relative), take the nested UL out of normal flow (position:absolute), and avoid fixed heights on the main UL so the dropdown can appear over the page instead of pushing content down.

Suggested corrected markup and minimal styling (uses a .submenu class to make the selectors explicit; a child-selector like ul.nav li > ul works equally well, as and discussed):

<ul class="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">Active Candidates</a></li>
  <li>
    <a href="#">Candidates</a>
    <ul class="submenu">
      <li><a href="#">Jobs</a></li>
    </ul>
  </li>
  <li><a href="#">Contact Us</a></li>
</ul>
ul.nav { list-style:none; margin:0; padding:0; background:#000; }
ul.nav > li { position:relative; display:inline-block; vertical-align:top; }
ul.nav > li > a { display:block; padding:6px 10px; color:#0f0; text-decoration:none; }
ul.nav .submenu { position:absolute; left:0; top:100%; display:none; white-space:nowrap; background:#000; }
ul.nav li:hover > .submenu { display:block; }
ul.nav .submenu li { display:block; }

Quick troubleshooting notes: confirm the HTML is well-formed (closing tags), remove any height or overflow:hidden from ancestor elements that might clip the submenu, and use browser devtools to inspect computed position/top/left. For older IE support, float:left on LIs plus clearing can replace inline-block. Also add a z-index to the submenu if it appears behind other elements and ensure keyboard accessibility (focus styles) if needed.

Recommended Answers

All 2 Replies

Member Avatar for simplypixie

You need to give your sub-ul a class and then right the formatting for that class in your style sheet to position it correctly.

Member Avatar for drjohn

This simple tutorial might help you.

or this one

http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/


google will give you millions of examples to study and work from

You don't need to add a class to the sub-ul.

At its simplest, you can just copy the entire code from either tutorial, then re-style to suit your site. THEN try to understand the code.

Edited by drjohn because: n/a
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.