Div on top of Div

Why don't you use one div, and use the CSS background declaration? You can then quite happily use the navigation inside the same div.

<div id="sidebarNav">
menu code here
menu code here
menu code here
</div>

and have the css style:

div#sidebarNav
     {
     background: url(images/sidebarBg.gif) transparent no-repeat;
     }

...obviously change what you need (transparent to your preferred hex-colour if required etc.)

co2 - how would i do that with the attached layout. This is an exact replica of what my menu must look like. It's driving me CRAZY!!! Thanks for responding.

Don't get too wound up with divs. You can do what you need with 1 or 2 at most.

Also, I couldn't quite figure out if level 2 was a sub-menu list of level 1 or a text area. I've used a text area in my example:

http://dev.c-o2.net/nav.htm

Here's the HTML (the CSS is displayed in the example):

<div id="nav">
	<ul>
		<li><h4>Menu Level 1</h4></li>
		<li><a href="#">Menu Link 1</a></li>
		<li><a href="#">Menu Link 2</a></li>
		<li><a href="#">Menu Link 3</a></li>
	</ul>
	<div id="text">
		<h4>Text Header (Level 2)</h4>
		<p>Text area content goes here.</p>
		<h4>Text Header</h4>
		<p>Text area content goes here.</p>
	</div>
	<ul>
		<li><h4>Menu Level 3</h4></li>
		<li><a href="#">Menu Link 1</a></li>
		<li><a href="#">Menu Link 2</a></li>
	</ul>
</div>

I should also add... there several ways you could accomplish this. You could use 3 divs as you suggested. You could use 1 div. It depends how exactly you want it to work (maybe mine isn't the greatest, but it's late )

Thanks for responding co2. That second menu was supposed to be a submenu. What i ended up doing instead of using lists was to use images for the bullets and then in three divs place the menu (one for each level). The code looks like this:

HTML BODY #pagebarleft .menu P.menulevelone 
{
	position: relative;
	line-height: 80%;
	width: auto;
	margin-left: 0px;
	margin-top: 0px;
	background-color: #fff;
	z-index: 99;
	font-weight: normal;
	color: #3366cc;
	font-size: 75%;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
	text-align: left;
}
HTML BODY #pagebarleft .menu P.menuleveltwo
{
	position: relative;
	line-height: 95%;
	width: auto;
	margin-left: 15px;
	margin-top: 0px;
	background-color: #fff;
	z-index: 98;
	font-weight: normal;
	color: blue;
	font-size: 75%;
	text-align: left;
}

HTML BODY #pagebarleft .menu P.menulevelthree
{
	position: relative;
	line-height: 80%;
	width: auto;
	margin-left: 25px;
	margin-top: 0px;
	background-color: #f5f5f5;
	z-index: 98;
	font-weight: normal;
	color: blue;
	font-size: 75%;
	border-right: 1px solid #ccc;
	text-align: left;
}