Member Avatar for AycheKay

I've got a pure CSS drop down menu where the child buttons cover up part of the parent button. Any ideas how to fix this?

You can see the page here:

Here's the relevant CSS code:

#hpmenucontainer {
	clear: both;
	width: 610px;
	margin: 20px auto;
	height: 96px;
}
#hpmenu {
	position: absolute;
	width: 610px;
	
}

#hpmenu ul .item{
	display:none;
}

#hpmenu ul:hover .item {
	display:block;
	background:#CFCFCF;
	width: 150px;
	height: 32px;
	padding-top: 12px;
	border: 1px solid #fcfcf4;
	margin: 0;
}
 
#hpmenu ul:hover .item a {
	color:#1A1A1A;
	text-decoration:none;
}

#hpmenu ul:hover .item a:hover {
	color:#1A1A1A;
}
 
#hpmenu ul{
	text-align: center;
	background:#CFCFCF;
	width: 150px;
	height: 32px;
	padding-top: 12px;
	float: left;
	list-style:none;
	font-weight: bold;
	letter-spacing: 1px;
	padding-left: 0px;
	margin: 1px;
}

#hpmenu ul a {
	text-decoration:none;
	color:#1A1A1A;
}
  • 3 Contributors
  • 4 Replies
  • 183 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by shaya4207

Dani AI

Generated

A common reason a pure-CSS dropdown appears on top of its parent is that the submenu is still in the normal flow or has been nudged into place rather than positioned relative to the parent. A reliable pattern is to take the submenu out of flow: make the parent list item a positioned container and absolutely position the submenu so it lands exactly below the parent (no guessing offsets needed). That keeps the parent visible, prevents overlap, and behaves predictably if menu height or fonts change.

/* parent container */
#hpmenu li { position: relative; }

/* the submenu */
#hpmenu .submenu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
}

/* show on hover / keyboard focus */
#hpmenu li:hover > .submenu,
#hpmenu li:focus-within > .submenu { display: block; }

Checklist and gotchas: confirm no ancestor has overflow:hidden (that will clip absolute children); z-index only works on positioned elements, so set position on the element receiving z-index; avoid relying solely on :hover for touch—add a click/toggle fallback or use focus-within for keyboard users; use aria-expanded and role attributes for accessibility if needed. Using absolute positioning also avoids fragile margin hacks that create gaps when styles change.

Useful context for the thread: ’s margin idea is a quick workaround but can introduce spacing issues; ’s relative-position fix worked as a quick patch. For a more maintainable solution, the absolute-submenu pattern above is recommended. ’s note about marking the thread solved is appropriate once the robust approach is in place.

Recommended Answers

All 4 Replies

Member Avatar for drjohn

If you give the first item in each drop-down a class of .first and set the styles
.first {margin-top:10px;}
it will move that item down a bit for you.

If you try applying it to the hpmenu ul, it makes a gap between ALL the items in the drop-down, which is not good. Remember it is perfectly legal to give something two classes, so change the first item in each drop-down (the one below the one with class="top") from class="item" to class="item first"

If this helps, why not visit my sites, I need visitors

Member Avatar for AycheKay

Great solution but it seems to have no affect. I've tried writing the class as a stand alone class and I've tried it a couple other ways and it still doesn't make any change. I'm uncertain why those subitems are not positioned properly in the first place.

Member Avatar for AycheKay

Looks like I got it taken care of using relative positioning.

#hpmenu ul .item{
	display:none;
	position: relative;
	top: 18px;
	left: -1px;
}
Member Avatar for shaya4207

Please mark this thread as 'solved' so someone else can search and enjoy your solution...

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.