Problem with Pure CSS DropDown Menu

[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:
http://www.powerzoneequipment.com/index99.asp

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;
}

[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

[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.

[AycheKay]

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

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

[shaya4207]

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