CODEWITHSUNDEEP
htmlcss
Darren Riches
Darren Riches

Reputation: 149

Sub menu displaying behind another div

I have a CSS menu which has a drop down section to show a sub menu. The sub menu is displaying behind another DIV in IE8. In IE9, Chrome, FF and Safari it is displaying correctly.

How do I correct this?

Many thanks.

<!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>
    <meta http-equiv="Content-Type"
    content="text/html; charset=utf-8" />
    <title>Test</title>
    <style type="text/css">
    @charset "utf-8";
        body  {
        font: 100% Verdana, Arial, Helvetica, sans-serif;
        background: #666666;
        margin: 0;
        padding: 0;
        text-align: center;
        color: #000000;
        no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        background-color: #09F;
        background-repeat: no-repeat;
        }
        p {
        margin:0
        }
        .darrobric #white-header-bg {
        position: relative; 
        width: 100%;
        margin: 0 auto; 
        border: 0px solid #000000;
        text-align: left;
        background: #ffffff;
        height: 100px;
        }
        .darrobric #bg {
        position: relative; 
        width: 100%;
        margin: 0 auto; 
        border: 0px solid #000000;
        text-align: left;
    }
    .darrobric #header2 {
        height: 100px; 
        background: #ffffff;  
        width: 960px;
        position: relative;
        margin: 0 auto;
    }
    .darrobric #logo {
        position: absolute;
        left: 0;
        width: 240px;
    }
    .darrobric #nav {
        position: absolute;
        top: 31px;
        right: -5px;
        width: 730px;
        background: #ffffff;
        font-size: 14.5px;
        font-family: Arial, Helvetica, sans-serif;
        color: #0059a2;
        font-weight: bold;
        text-align: right;
        margin-right: 5px;
    }
    .darrobric #buttons {
        position: absolute;
        right: 0px;
        width: 300px; 
        background: #ffffff;
        font-size: 14.5px;
        font-family: Arial, Helvetica, sans-serif;
        color: #0059a2;
        font-weight: bold;
        text-align: right;
        top: 10px;
    }
    .darrobric #slider-container {
        height: 332px;
        background: #00569c;
        padding: 0;  
        margin-bottom: 25px;
    }
    .darrobric #container {
        position: relative;
        width: 960px;
        margin: 30px auto;
        border: 0px solid #000000;
        text-align: left;
        height: 100%;
    } 
    .darrobric #slider-bg {
        background-image: url(trans.png);
        padding: 10px 10px 10px 10px;
        margin-bottom: 25px;
        height: 333px;
        position: static;
    } 
    .darrobric #map-container {
        padding: 0;
        margin-bottom: 25px;
        width: 608px;
    }
    .darrobric #mainContent { 
        margin: 0 200px; 
        padding: 0 10px; 
    }
    .darrobric #box-text {
        padding: 0px;
        width: 260px;
        line-height: 18px;
    }
    .darrobric #box-image {
        padding: 0px;
        width: 150px;
        right: 0px;
        margin-top: -150px;
        margin-left: 270px;
        height: 150px;
    }
    .darrobric #footer-small-logo {
        padding: 0px 0px 0px 840px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 13px;
        color: #565656;
        height: 35px;
        line-height: 40px;
        margin-top: -45px;
    }
    .darrobric #SLIDESTEXT{
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #FFF;
        margin-left: 665px;
        margin-top: -305px;
        margin-right: 20px;
        line-height: 22px;
    }
    .darrobric #BUTTON {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #FFF;
        margin-left: 665px;
        margin-top: 25px;
        margin-right: 20px;
        line-height: 22px;
    }

    .fltrt { 
        float: right;
        margin-left: 8px;
    }
    .fltlft { 
        float: left;
        margin-right: 8px;
    }
    .one {
        overflow:hidden;
        height:100%;
        float: left;
        width: 960px;
    }
    /* horizontal menus */
    #nav, .nav, #nav .nav li {
        margin:0px;
        padding:0px;
        z-index: 5000;
    }
    #nav li {
        float:right;
        display:inline;
        cursor:pointer;
        list-style:none;
        padding:5px 18px 5px 0px;
        border:0px #000 solid;
        position:relative;
        z-index: 1000;
        background-color: #FFF;
    }
    #nav li ul.first {
    left:-1px; 
    top:100%;
    }
    li, li a {
        color:#00569C;
        text-decoration:none;
        text-align: left;
    }
    #nav .nav li {
        width:100%;
        text-indent:10px;
        line-height:30px;
        margin-right:10px;
        border-top:0px #000 solid;
        border-bottom:0px #000 solid;
        border-left:none;
        border-right:none;
        onclick="return true"
    ;
        background-color: #FFF;
    }
    #nav li a {
    display:block; 
    width:inherit; 
    height:inherit;
    }
    ul.nav { 
    display:none; 
    }
    #nav li:hover > a, #nav li:hover {
        color:#00569C;
    }
    li:hover > .nav {
        display:block;
        position:absolute;
        width:200px;
        top:-2px;
        left:30%;
        z-index:1000;
        border:0px #000 solid;
    }
    li:hover {
        position:relative;
        z-index:2000;
    }

    #basic li {
    color:#000;
    }
    </style>
  </head>
  <body class="darrobric">
    <div id="white-header-bg">
      <div id="header2">
        <div id="logo"></div>
        <div id="nav">
          <ul id="nav">
            <li>Heading 5</li>
            <li>
              <a href="#">Heading 4</a>
              <ul class="nav first">
                <li>
                  <a href="our-locations.html">111</a>
                </li>
                <li>
                  <a href="career-paths.html">222</a>
                </li>
                <li>
                  <a href="#">333</a>
                </li>
                <li>
                  <a href="#">444</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="companies-and-brands.html">Heading 3</a>
            </li>
            <li>
              <a href="latest-news.html">Heading 2</a>
            </li>
            <li>
              <a href="#">Heading 1</a>
              <ul class="nav first">
                <li>
                  <a href="introducing-Lactalis.html">555</a>
                </li>
                <li>
                  <a href="our-history.html">666</a>
                </li>
                <li>
                  <a href="companies-and-brands.html">777</a>
                </li>
                <li>
                  <a href="our-locations.html">888</a>
                </li>
                <li>
                  <a href="http://www.youtube.com">999</a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div id="container">
      <div class="one">
        <div id="slider-bg">
          <div id="slider-container">
            <IMG name="SLIDESIMG" src="blank.png" width="640"
            height="332" alt="Slideshow image">
              <DIV ID="SLIDESTEXT" STYLE="position: relative;">Elit
              praesent fringilla viverra is sapien vel vehicula
              curabiturin lectus sem, nec eleifend est. Aliquam
              erat ion volutpat aliquam et lorem libero, non
              fringillbh ipsum dolor sit amet consectetuer
              adipiscing elit, sed diam nonummy nibhen euismod
              tincidunt ut laoreet dolore sed diam nonummy
              nibhen.</DIV>
            </IMG>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Upvotes: 0

Views: 1799

Answers (1)

Andrew
Andrew

Reputation: 1880

For IE the main top level div element needs to have a higher z-index than the one it sits on top of or the element that you are trying to sit on top of it will hide underneath. if that makes sense.

You need to add this to your code:

#container{
    z-index:10;
    position:relative;
}
#white-header-bg{
    z-index:11;
    position:relative;
}

Also I noticed that you have a nav id in a few places. the ID should only be used once for example id="nav" how ever class="nav" can be used multiple times

Upvotes: 1

Related Questions