Grow your CSS skills. Land your dream job.

z-index

  • # June 8, 2009 at 4:14 pm

    http://www.beckenhauerconstruction.com/dropdown2.html

    how can I get my drop down menus to go overtop the text below them instead of shifting the below text. I put a z-index and relative positioning on the menu and test div’s, but it still isn’t working. Any suggestions would be great!

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    <html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!– TemplateBeginEditable name="doctitle" –>
    <title>Untitled Document</title>
    <!– TemplateEndEditable –>
    <link href="drop.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <link href="images/BCI.ico" rel="SHORTCUT ICON" />
    <!–
    body,td,th {
    font-family: Arial, Helvetica, sans-serif;
    }
    a:link {
    color: #CCC;
    }
    a:hover {
    color: #C00;
    }
    a:visited {
    color:#CCC;
    }
    –>
    </style><!– TemplateBeginEditable name="EditRegion4" –>
    <!– TemplateEndEditable –>
    </head>
    <body onload="initLightbox()">

    <div id="head">
    <h1><img name="" src="../images/Under_Construction/BCI_logo.jpg" width="312" height="60" alt="BCI Beckenhauer Construction" />
    Building Nebraska for over 130 Years
    </h1>
    </div>

    <div id="menu">
    <ul>
    <li><a href="index.html"><strong>Home</strong></a>
    <ul>
    <li><a href="currentUNK.html">UNK Bruner Hall</a></li>
    <li><a href="currentBuffaloCounty.html">Buffalo County</a></li>
    <li><a href="currentJMMC.html">Jennie M. Melham Memorial Medical Center</a></li>
    <li><a href="currentNIM.html">Norfolk Iron and Metal</a></li>
    <li><a href="currentTriCo.html">Tri County Hospital</a></li>
    <li><a href="References.html">References</a></li>
    </ul>
    </li>
    <li><a href="Projects.html"><strong>Projects</strong></a>
    <ul>
    <li><a href="current_projects.html">Under Construction</a></li>
    <li><a href="Health_Care.html">Health Care</a></li>
    <li><a href="Education.html">Education</a></li>
    <li><a href="Community_Facilities.html">Community Facilities</a></li>
    <li><a href="Banks.html">Banks</a></li>
    <li><a href="Religious.html">Religious</a></li>
    <li><a href="Industrial.html">Industrial</a></li>
    <li><a href="Retail.html">Retail</a></li>
    </ul>
    </li>
    <li><a href="Services.html"><strong>Services</strong></a>
    </li>
    <li><a href="Photo_Gallery.html"><strong>Photo Gallery</strong></a>
    <ul>
    <li><a href="Health_Care_Pics.html">Health Care</a></li>
    <li><a href="Education_Pics.html">Education</a></li>
    <li><a href="Community_Facilities_pics.html">Community Facilities</a></li>
    <li><a href="Banks_pics.html">Banks</a></li>
    <li><a href="Religious_pics.html">Religious</a></li>
    <li><a href="Industrial_pics.html">Industrial</a></li>
    <li><a href="Retail_pics.html">Retail</a></li>
    </ul>
    </li>
    <li><a href="About_Us.html"><strong>About Us</strong></a></li>
    <li><a href="In_The_News.html"><strong>In The News</strong></a></li>
    <li><a href="Contact_Us.html"><strong>Contact Us</strong></a></li>
    </ul>
    </div>
    <div id="test">
    <h2>What Can BCI Do For You?</h2>
    <p>We don’t build buildings to suit our needs; we build them to suit your needs. We listen, assess your needs, and provide you with the services, expertise and resources that satisfy your priorities first. We work as partners to develop innovative solutions.</p>
    <p>Our relationships are built upon trust, honesty and integrity. Evidence of this is our many repeat customers that we have shared from generation to generation. </p>
    <p>Beckenhauer Construction is an industry leader in Construction Management and Design Build.</p>
    </div>

    <!– TemplateBeginEditable name="EditRegion3" –>
    <div id="center">
    <h2> </h2>
    </div>
    <!– TemplateEndEditable –>
    <div id="footer">
    <p id="address">
    1901 Riverside Blvd P.O. Box 866 Norfolk, NE 68701 Ph (402) 371-5363 <a href="mailto:office@beckenhauerconstruction.com">e-mail us: office@beckenhauerconstruction.com</a>
    </p>
    </div>

    #test {
    float:left;
    width:99%;
    padding-left:1%;
    text-align:center;
    margin-left:1%;
    margin-right:1%;
    margin-top:1%;
    margin-bottom:1%;
    position:relative;
    z-index:0;
    }
    #menu {
    position:relative;
    z-index:1;
    }

    #menu ul {
    margin-left: -2.5em;
    }

    #menu li {
    list-style-type: none;
    border: 3px #006 outset;
    float: left;
    width: 8em;
    background-color: #CCCCFF;
    text-align: center;
    }

    #menu a {
    display: block;
    color: #000;
    text-decoration: none;
    }

    #menu a:hover {
    border: 3px #00f inset;
    }

    #menu li ul {
    display: none;
    }

    #menu li:hover ul {
    display: block;
    }

    body {
    background:#000000;
    }
    #head {
    text-align:left;
    background-color:#C00;

    }
    #footer {
    font-family:Arial, Helvetica, sans-serif;
    border:1px black solid;
    float:left;
    width:100%;
    clear:both;
    text-align:center;

    }
    #address {
    font-family:Arial, Helvetica, sans-serif;
    font-weight:bold;
    padding:1%;
    color:#C00;
    }
    h2 {
    color: #C00;
    font-family:Arial, Helvetica, sans-serif;
    }

    # June 8, 2009 at 4:52 pm

    I’d give the position to the actual drop down UL instead of the parent UL:

    Code:
    #menu li:hover ul {
    display: block;
    position:relative;
    z-index:10
    }

    Your link doesn’t work so I didn’t see the exact problem =/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".