[RESOLVED] Help with simple horizontal menu

[softwareguy74]

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:

    <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:

#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;

}

[SambaNeko]

Do you have a reason for using absolute positioning on #cssm1? If not, take that off and add clearing for #content (#content{clear:left;}).

If so, then #cssm1 is outside of the normal positioning flow; adjacent elements can't account for it when positioning themselves. Additionally, margin with an "auto" value and float have no effect on an absolutely positioned element. So you'd need to use top and left to stick #cssm1 to a particular position, and then leave some empty space for it to occupy; such as:

#content{
	margin-top:50px;
}
#cssm1{
	position: absolute;  
	z-index: 99; 
	top:0;
	left:0;
	line-height: 20px;
}

That'll fix #cssm1 to the top-left corner, and give #content a top-margin of 50px that #cssm1 can occupy.

[softwareguy74]

That did it! Thanks SambaNeko!