Div appears a few pixels below where it should.

Hello, I am having a problem with a css dropdown menu. The problem is not the drop down part, but where the sub-list appears when it drops down. I have tried a number of things, but can't seem to figure out why the sub-list appears so far below then rest of the nav.

HTML:

<div class="navigation">
<ul>
            	<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Nav_Home','','images/nav_home_hover.png',1)"><img src="images/nav_home.png" alt="Home" name="Nav_Home" width="58" height="43" border="0" id="Nav_Home" /></a>
           	    	<ul>
                    	<li><a href="#">Test</a></li>
                    </ul>
                </li>
                <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Nav_Services','','images/nav_services_hover.png',1)"><img src="images/nav_services.png" alt="Services" name="Nav_Services" width="114" height="43" border="0" id="Nav_Services" /></a></li>
                <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Nav_Packages','','images/nav_packages_hover.png',1)"><img src="images/nav_packages.png" alt="Hosting Packages" name="Nav_Packages" width="152" height="43" border="0" id="Nav_Packages" /></a>
                	<ul>
                    	<li><a href="#">Basic Package</a></li>
                        <li><a href="#">Premium Package</a></li>
                        <li><a href="#">Professional Package</a></li>
                        <li><a href="#">Enterprise Package</a></li>
                    </ul>
                </li>
                <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Nav_Support','','images/nav_support_hover.png',1)"><img src="images/nav_support.png" alt="Customer Support" name="Nav_Support" width="152" height="43" border="0" id="Nav_Support" /></a></li>
                <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Nav_Clientarea','','images/nav_clientArea_hover.png',1)"><img src="images/nav_clientArea.png" alt="Client Area" name="Nav_Clientarea" width="108" height="43" border="0" id="Nav_Clientarea" /></a></li>
            </ul>
</div>[ATTACH=CONFIG]42759[/ATTACH][ATTACH=CONFIG]42759[/ATTACH]

HTML:

CSS:

.navigation {
	background: url('images/nav_bg.gif') repeat-x;
	height: 43px;
	z-index: -2;
}

	.navigation ul {
		float: left;
		margin-left: 10px;
	}
	
	.navigation li {
		float: left;
		list-style: none;
	}
	
		.navigation li ul {
			background: url('images/nav_hover_bg.gif') repeat-x;
			color: #ad9677;
			display: none;
			position: absolute;
			padding-top: 5px;
			padding-bottom: 5px;
			margin: 0;
			width: 175px;
		}
		
		.navigation li ul li {
			float: none;
			list-style: none;
			height: 29px;
		}
		
			.navigation li ul li a {
				color: #ad9677;
				text-decoration: none;
				display: block;
				padding: 9px;
				padding-left: 19px;
				padding-right: 19px;
			}
			
			.navigation li ul li a:hover {
				height: 10px;
				background: #1c1412;
				border-bottom: 1px solid #614828;
				color: #f19c06;
			}

Code (markup):

I have attached an image of the problem. The orange bar is the main nav, the brown box is the sub-nav. The blue box is where I circled the problem area. There are a few pixels there that I am having trouble getting rid of. Any suggestions?


Thanks in advance.

 

are you talking about the text or the div that contains the text ?

 

Sorry, I meant the ul that is a layer deeper than root.

<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Nav_Packages','','images/nav_packages_hover.png',1)"><img src="images/nav_packages.png" alt="Hosting Packages" name="Nav_Packages" width="152" height="43" border="0" id="Nav_Packages" /></a>
                    <ul>
                        <li><a href="#">Basic Package</a></li>
                        <li><a href="#">Premium Package</a></li>
                        <li><a href="#">Professional Package</a></li>
                        <li><a href="#">Enterprise Package</a></li>
                    </ul>
                </li>

HTML:

The ul inside of the li for packages is appearing 3 pixels below the bottom of the original li and I cannot figure out why.

 

.navigation li ul {
background: url('images/nav_hover_bg.gif') repeat-x;
color: #ad9677;
display: none;
position: absolute;
padding-top: 5px;
padding-bottom: 5px;
margin: -3;
width: 175px;
}

 

Already tried a margin-top: -3px;. It fixes the issue in a way, but not entirely. When the dropdown animation is occuring, the animation begins 3pixels below and slides down as it should, but also slides up for the remaining 3pixels. I'd rather it just start at the appropriate place and slide down.