Two Smooth Nav Menus with z-index problem

[govman]

1) Script Title: Smooth Navigational Menu (v1.02)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...smoothmenu.htm

3) Describe problem: I have two dropdowns on the same page that happen to be stacked on top of each other. (This was a client request, unfortunately.) The menus work excellent, however, the top menus' dropdown items appear over the bottom menu when I hover over them.

In this image you will see the top dropdown menu in beige and the second dropdown menu underneath it in blue. Both items have dropdown items. The top items cover the bottom items when you hover over their parent item.

I was able to get the shadow background to appear on top by adding z-index: 999 to it's CSS:

.ddshadow {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	background: #c4b487;
	z-index: 999;
}

I would be grateful for any help, as I know it is a z-index issue but I'm unable to figure it out.

[Snookerman]

Please post a link to the page on your site that contains the problematic script or attach your code so we can check it out and help you.

[govman]

Here's the HTML & CSS:

<div id="smoothmenu1" class="ddsmoothmenu">
	<ul>
		<li><a href="">Home</a></li>
		<li><a href="#">About The Committee</a>
			<ul>
				<li><a href="#">Sub Item 1.1</a></li>
				<li><a href="#">Sub Item 1.2</a></li>
				<li><a href="#">Sub Item 1.3</a></li>
			</ul>
		</li>
		<li><a href="#">Issues</a>
			<ul>
				<li><a href="#">Sub Item 1.1</a></li>
				<li><a href="#">Sub Item 1.2</a></li>
				<li><a href="#">Sub Item 1.3</a></li>
			</ul>
		</li>
		<li><a href="#">Legislation</a></li>
		<li><a href="#">Hearings</a>
			<ul>
				<li><a href="#">Sub Item 2.1</a></li>
			</ul>
		</li>
		<li><a href="">Newsroom</a></li>
		<li><a href="">Links</a></li>
		<li><a href="">Contact</a></li>
	</ul>
	<br style="clear: left" />
</div>

<div id="smoothmenu2" class="ddsmoothmenu2">
	<ul>
		<li><a href="">Newsroom</a></li>
		<li><a href="#">Statements &amp; Speeches</a>
			<ul>
				<li><a href="#">Sub Item 1.1</a></li>
				<li><a href="#">Sub Item 1.2</a></li>
				<li><a href="#">Sub Item 1.3</a></li>
			</ul>
		</li>
		<li><a href="#">Multimedia</a>
			<ul>
				<li><a href="#">Sub Item 1.1</a></li>
				<li><a href="#">Sub Item 1.2</a></li>
				<li><a href="#">Sub Item 1.3</a></li>
			</ul>
		</li>
		<li><a href="#">On The Issues</a></li>
		<li><a href="#">Ranking Member Message</a>
			<ul>
				<li><a href="#">Sub Item 2.1</a></li>
			</ul>
		</li>
	</ul>
	<br style="clear: left" />
</div>

.ddsmoothmenu {
	font: bold 15px georgia;
	width: 100%;
}

.ddsmoothmenu ul {
	z-index: 100;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.ddsmoothmenu ul li {
	position: relative;
	display: inline;
	float: left;
}

.ddsmoothmenu ul li a {
	display: block;
	color: #fff;
	padding: 8px 19px;
	color: #2d2b2b;
	text-decoration: none;
}

* html .ddsmoothmenu ul li a {
	display: inline-block;
}

.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited {
	color: #fff;
}

.ddsmoothmenu ul li a:hover {
	color: #333;
}

.ddsmoothmenu ul li ul {
	position: absolute;
	left: 0;
	display: none;
	visibility: hidden;
}

.ddsmoothmenu ul li ul li {
	display: list-item;
	float: none;
}
/*
.ddsmoothmenu ul li ul li ul {
	top: 0;
}
*/
.ddsmoothmenu ul li ul li a {
	font: bold 15px georgia;
	width: 160px;
	padding: 5px 5px 5px 19px;
	margin: 0;
	border-top-width: 0;
}

.ddshadow {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	background: #c4b487;
}

.ddsmoothmenu2 {
	font: bold 14px georgia;
	width: 100%;
}

.ddsmoothmenu2 ul {
	z-index: 100;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.ddsmoothmenu2 ul li {
	position: relative;
	display: inline;
	float: left;
}

.ddsmoothmenu2 ul li a {
	display: block;
	color: #fff;
	padding: 8px 11px;
	color: #2d2b2b;
	text-decoration: none;
}

* html .ddsmoothmenu2 ul li a {
	display: inline-block;
}

.ddsmoothmenu2 ul li a:link, .ddsmoothmenu2 ul li a:visited {
	color: #fff;
}

.ddsmoothmenu2 ul li a:hover {
	color: #333;
}

.ddsmoothmenu2 ul li ul {
	position: absolute;
	left: 0;
	display: none;
	visibility: hidden;
}

.ddsmoothmenu2 ul li ul li {
	display: list-item;
	float: none;
}
/*
.ddsmoothmenu2 ul li ul li ul {
	top: 0;
}
*/
.ddsmoothmenu2 ul li ul li a {
	font: bold 14px georgia;
	width: 160px;
	padding: 5px 5px 5px 15px;
	margin: 0;
	border-top-width: 0;
}

.ddshadow2 {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	background: #8ca6b4;
}