css drop down menu hidden behind content

**k0r54** · 12-17-2009 09:35 AM

Hi,

I am looked online and trying to figure out the problem but cannot seem to find a solution for IE7.

Putting the z-index on the .menu3 works for IE8 but not 7. Any help would be appreciated.

Fault: The menu system hides behind the content.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HTML>
 
  <HEAD>  
    <!-- CSS -->
    <style type="text/css">
	
#container {
  position:relative;
  float:left;
  width:100%;
  text-align:center;
}

#contentheader {
  position:relative;
  float:left;
  width:100%;
  background:#f2f2f2;
  border-bottom:1px solid #999;
}

#contentbody {
	position:relative;
	float:left;
	text-align:left;
}

.menu3 {
  position:relative;
  float:left;
  z-index:1000;
}
	
	/* MENU */
ul.cssMenu ul{display:none;}
ul.cssMenu li:hover>ul{display:block;}
ul.cssMenu ul{position: absolute;left:-1px;top:100%; border-top:1px solid #999;border-bottom:1px solid #999;}
ul.cssMenu ul ul{position: absolute;left:99.5%;top:-1px; border-top:1px solid #999;border-bottom:1px solid #999;}
ul.cssMenu,ul.cssMenu ul {
	margin:0px;
	list-style:none;
	padding:0px 0px 0px 0px;
}
ul.cssMenu ul{
  width:auto;
}
ul.cssMenu li{
	display:block;
	font-size:0px;
}
ul.cssMenu a:active, ul.cssMenu a:focus {
  outline-style:none;
}

/* First Level */
ul.cssMenu a, ul.cssMenu li.dis a:hover, ul.cssMenu li.sep a:hover {
	display:block;
	vertical-align:middle;
	text-align:left;
	text-decoration:none;
	font-size:12px;
	font-weight:bold;
	color: #006;
	text-decoration:none;
	cursor:default;
	padding:12px 15px 12px 15px;
	text-align:center;
	border-right:1px solid #999;
	border-left:1px solid #FFF;
}

ul.cssMenu ul li {
  border-left:1px solid #999;
}

/* Second level and behond */
ul.cssMenu ul a {
	padding:7px 15px 7px 5px;
	border-right:1px solid #999;
	border-left:20px solid #CCC;
	background:#f2f2f2;
	text-decoration:none;
	font-size:11px;
	font-weight:normal;
	color: #006;
}

ul.cssMenu span {
	overflow:hidden;
}
ul.cssMenu li {
	float:left;
}
ul.cssMenu ul li {
	float:none;
}
ul.cssMenu ul a {
	text-align:left;
	white-space:nowrap;
}
ul.cssMenu li:hover{
	position:relative;
}
ul.cssMenu li:hover>a{
	color:#006;
	background:#e2e2e2;
	text-decoration:none;
}
ul.cssMenu li a:hover{
	position:relative;
	background:#e2e2e2;
	color:#006;
	text-decoration:none;
}

	</style>
  </HEAD>
  
  <BODY>
 
	<!-- CONTAINER -->
	<div id="container">
      <div id="contentheader">
 
 
<!-- BEGIN BLOCK (Menu) -->
 
		<div class="menu3">
 
          <ul class="cssMenu cssMenum"> 
            <li class="cssMenui"><a href="#" class="cssMenui">One</a></li>
            <li class="cssMenui"><a href="#" class="cssMenui">Two</a>
            <ul class="cssMenum">
              <li class="cssMenui"><a href="#" class="cssMenui">Two A</a>
              <ul class="cssMenum">
                <li class="cssMenui"><a href="#" class="cssMenui">Two A One</a></li>
                <li class="cssMenui"><a href="#" class="cssMenui">Two A Two</a></li>
                <li class="cssMenui"><a href="#" class="cssMenui">Two A Three</a></li>
                <li class="cssMenui"><a href="#" class="cssMenui">Two A Four</a></li>
              </ul>
              <li class="cssMenui"><a href="#" class="cssMenui">Two B</a></li>
            </ul></li>
          </ul>
 
        </div>
 
<!-- END BLOCK (Menu) -->
 
      </div>
      
      <div id="contentbody">
  	    <p>Content that should be on top</p>
	  </div>
    </div>
    
  </BODY>
</HTML>

Thanks
k0r54

**Fang** · 12-17-2009 10:35 AM

Drop all the position:relative;

**k0r54** · 12-17-2009 10:42 AM

thank

worked a treat!

I only had to drop if of the contentbody (everything visably below the menu)

Thanks
k0r54

**k0r54** · 12-17-2009 10:52 AM

Ok,

I thought it was working and for visability it is.

However if you move you mouse over it slowly. When it reaches the text underneath the menu disapears. In IE8 it stays. I think it has something to do with the padding but is there a way around it?

Thanks
k0r54

**k0r54** · 12-18-2009 02:30 AM

After playing around some more it is the padding that is effected. When I move the mouse over the drop down menu, when it reaches the padding it will close it.

Any thoughts?

Thanks
k0r54

**k0r54** · 12-22-2009 02:48 AM

ok found it!

I needed to apply a width to either /*first level */ (if i want to apply it to all levels) or /* second level and behond */ (if the top needs to be nothing)

When I put a width in px on either of these two it works fine.

It would be nice to know how to allow the width to be dynamic if anyone knows? I did try width:auto but that had the same effect as no width and the menu didn't stay down.

Cheers
k0r54

Thread: css drop down menu hidden behind content

Thread Tools

Display

css drop down menu hidden behind content

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions