I've got a good start, but having an issue with the content below the menu. I need #content div to be visible underneath the menu, but it is not. If the menu wraps by shrinking the page, #content should be pushed downward to still be visible.

Any help would be appreciated.

HTML:
HTML Code:
    <div id="cssm1">
        <ul>
            <li><a href="Page1.aspx">Page 1</a></li>
            <li><a href="Page2.aspx">Page 2 long text...</a></li>
            <li><a href="Page3.aspx">Page 3</a></li>
            <li><a href="Page4.aspx">Page 4</a></li>
            <li><a href="Page5.aspx">Page 5</a></li>
            <li><a href="Page6.aspx">Page 6</a></li>
            <li><a href="Page7.aspx">Page 7</a></li>
            <li><a href="Page8.aspx">Page 8</a></li>
            <li><a href="Page9.aspx">Page 9</a></li>                                                                     
        </ul>
    </div>
    <div id="content">
        This should be visible even if menu wraps
    </div>
CSS:
Code:
#cssm1 *  
{ 
	padding:0; 
	margin: 0; 
	font: 12px arial; 
}

#cssm1 
{
	position: absolute;  
	z-index: 99; 
	margin: 0 auto; 
	float: left; 
	line-height: 20px;
}

#cssm1 a 
{
	display: block; 
	border: 1px solid #fff; 
	background: gainsboro; 
	text-decoration: none; 
	padding: 3px 10px; 
}

#cssm1 a:hover  
{
	background: #789;
}

#cssm1 ul li, #cssm1 ul li ul li  
{
	list-style-type:none; 
}

#cssm1 ul li 
{
	float: left; 
}

#cssm1 ul li ul, #cssm1:hover ul li ul, #cssm1:hover ul li:hover ul li ul
{ 
	display:none;
	list-style-type:none; 
}

#cssm1:hover ul, #cssm1:hover ul li:hover ul, #cssm1:hover ul li:hover ul li:hover ul 
{ 
	display:block; 
}

#cssm1:hover ul li:hover ul li:hover ul 
{ 
	position: absolute;

}