drow down behind div

The navigation menu is a dropdown and it's falling behind a div box.


i'm using this jquery script : http://javascript-array.com/scripts/jquery_simple_drop_down_menu/

<style type="text/css">
/* menu styles */
#jsddm
{	margin: 0;
	padding: 0;
	
	}

	#jsddm li
	{	float: left;
		list-style: none;
		font: 12px Tahoma, Arial}

	#jsddm li a
	{	display: block;
		background: #324143;
		padding: 5px 12px;
		text-decoration: none;
		border-right: 1px solid white;
		width: 70px;
		color: #EAFFED;
		white-space: nowrap}

	#jsddm li a:hover
	{	background: #24313C
	  
	}
		
		#jsddm li ul
		{	margin: 0;
			padding: 0;
			position: absolute;
			visibility: hidden;
			border-top: 1px solid white}
		
			#jsddm li ul li
			{	float: none;
				display: inline}
			
			#jsddm li ul li a
			{	width: auto;
				background: #A9C251;
				color: #24313C}
			
			#jsddm li ul li a:hover
			{	background: #8EA344}
</style>

Code (markup):

i was able to solve it in Firefox by adding :

#jsddm
{	margin: 0;
	padding: 0;
	position: relative;
        z-index: 2;
}

Code (markup):

but that would cause IE 6 to be messed up ...


any help would be appreciated

 

was it okay before your edit?

if so just do a IE6 hack

<!--[if IE 6]>
#jsddm
{	position: static;
        z-index: auto;
}
<![endif]-->

Code (markup):

this gonna get those elements back to default for IE browser