BeTheBall
Posts: 6381
Joined: 6/21/2002
From: West Point Utah USA
Status: online
 |
Menu expanding behind content div - 4/26/2006 0:22:28
I have an expandable menu on the left side of my page. My problem is the when the menu expands, the expanding part appears behind the div that holds my content instead of on top. Here is a scaled down version of the page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SERP Hosting Guide</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="PRAGMA" content="NO-CACHE" />
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls.onmouseover=function() {
this.className+=" sfhover";
}
sfEls.onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]>
</script>
<style type="text/css">
<!--
/* Layout Stylesheet */
body{
margin: 0;
padding:0;
background-color:#003366;
color:#003366;
}
#hdr{
background-color:lightblue;
color:#000000;
border:solid #000000;
border-width:2px 0px;
margin:15px 0 0 0;
text-align:left;
}
.dropCap:first-letter {
font-size:150%;
float:left;
}
#lh-col{
position: absolute;
top: 125px;
left: 20px;
width: 180px;
border: 2px solid #000000;
background: lightblue;
color: #333333;
margin: 0px;
padding: 0px;
}
#rh-col{
margin: 20px 20px 20px 220px;
border: 2px solid #000000;
background: #ffffff;
color:#003366;
padding: 20px;
position :relative;
}
#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
float : left;
width : 11em;
}
#nav li { /* all list items */
position : relative;
float : left;
line-height : 1.25em;
margin-bottom : -1px;
width: 11em;
}
#nav li ul { /* second-level lists */
position : absolute;
left: -999em;
margin-left : 11.05em;
margin-top : -1.35em;
}
#nav li ul ul { /* third-and-above-level lists */
left: -999em;
}
#nav li a {
width: 11em;
w\idth : 10em;
display : block;
color : black;
font-weight : normal;
text-decoration : none;
background-color : white;
border : 1px solid black;
padding : 0 0.5em;
}
#nav li a:hover {
color : white;
background-color : black;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav
li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
#content {
margin-left : 12em;
}
</style>
-->
</style>
</head>
<body>
<!-- Header -->
<div id="hdr">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>
<body>
<p><img border="0" src="/SERPHosting/images/hsting_guide_logo.png" alt="SERP Hosting Guide Logo" title=""></p>
</body>
</html>
</div>
<!-- left column -->
<div id="lh-col"><br />
<h4 align="center" class="style2">Site Menu</h4>
<div id="nav">
<ul class="mainmenu">
<li id="mainmenu1"><a href="/SERPHosting/default.asp" class="mainmenu">Home</a><ul class="mainmenu">
<li><a href="/SERPHosting/what_is_a_content_owner.asp" class="mainmenu">Content Owners</a></li>
</ul>
</li>
<li id="mainmenu3"><a href="/SERPHosting/authorized_submitter.asp" class="mainmenu">Authorized Submitters</a></li>
<li id="mainmenu4"><a href="/SERPHosting/add_content.asp" class="mainmenu">Adding Content</a></li>
<li id="mainmenu5"><a href="/SERPHosting/updating_content.asp" class="mainmenu">Updating Content</a></li>
</ul>
</div>
</div>
<!-- end of left column -->
<!-- right column -->
<div id="rh-col">
<h3 align="center">Test</h3>
<p class="dropCap">This is a test </p>
<p class="dropCap">This is a test</p>
<p class="dropCap">THis is a test</p>
<p class="dropCap">This is a test</p>
<p class="dropCap">This is a test</p>
</div>
<!-- end of right column -->
</body>
</html>
Thoughts on how to fix this?
_____________________________
Duane
Some people are like Slinkies . . . Not really good for anything . . . . . But they still bring a smile to your face when you push them down a flight of stairs.
|
Printable Version 
New Messages
No New Messages
Hot Topic w/ New Messages
Hot Topic w/o New Messages
Locked w/ New Messages
Locked w/o New Messages
Post New Thread