www.webdeveloper.com
Results 1 to 6 of 6

Thread: css drop down menu hidden behind content

  1. #1
    Join Date
    Jun 2004
    Posts
    1,299

    css drop down menu hidden behind content

    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

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Drop all the position:relative;
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Jun 2004
    Posts
    1,299
    thank worked a treat!

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

    Thanks
    k0r54

  4. #4
    Join Date
    Jun 2004
    Posts
    1,299
    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

  5. #5
    Join Date
    Jun 2004
    Posts
    1,299
    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

  6. #6
    Join Date
    Jun 2004
    Posts
    1,299
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles