SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Location
    San Diego
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE Z-Index Dropdown

    I'm having trouble getting my dropdown to appear above the parent LI's.

    Any Solutions? The parent LI is set to relative and the dropdown is set to position with a positive z-index.

    HTML Code:
    <style type="text/css">
    #menu {
    margin:0;
    padding:0;
    list-style:none;
    }
    
    #menu li {
    float:left;
    position:relative;
    }
    
    #menu a {
    padding:15px 50px 15px 6px;
    display:block;
    font-family:Tahoma;
    font-size:14px;
    text-decoration:none;
    font-weight:bold;
    letter-spacing:-.1px;
    background:#FFF url('menu-dashed-bg.gif') 0 0 repeat-y;
    }
    
    #menu a.home { color:#1b3c5d; }
    #menu a.debt-relief-options { color:#f74b00; }
    #menu a.debt-settlement-services { color:#4c8221; }
    #menu a.financial-help-center { color:#4ab6de; }
    #menu a.about-us { color:#4f4f50; }
    #menu a.blog { color:#ec018c; }
    
    #menu ul {
    margin:0;
    padding:0;
    list-style:none;
    position:absolute;
    left:-999em;
    top:40px;
    background:#000;
    display:block;
    }
    
    #menu li:hover ul, #menu li.sfhover ul {
    left:0px;
    }
    
    #menu ul li {
    border-left:none;
    background:#FFF;
    position:static !important;
    }
    
    #menu ul a {
    padding:4px 15px;
    font-size:12px;
    color:#666666;
    font-family:Arial,Verdana,sans-serif;
    display:block;
    background:#FFF url('menu-arrow.gif') 8px 50% no-repeat;
    border-bottom:1px #e0e0e0 solid;
    border-right:1px #e0e0e0 solid;
    letter-spacing:normal;
    font-weight:normal;
    display:block;
    }
    
    #menu ul a:hover {
    background:#d7f4fc url('menu-arrow.gif') 8px 50% no-repeat; 
    border-bottom:1px #bdd6dd solid;
    border-right:1px #bdd6dd solid;
    }
    
    #dro, #dro li { width:231px; }
    #dro a { width:201px; }
    * html #dro a { width:231px; }
    #drs, #drs li { width:271px; }
    #drs a { width:241px; }
    * html #drs a { width:271px; }
    #fhc, #fhc li { width:181px; }
    #fhc a { width:151px; }
    * html #fhc a { width:181px; }
    #con, #con li { width:181px; }
    #con a { width:151px; }
    * html #con a { width:181px; }
    </style>
    <script type="text/javascript">
    sfHover = function() {
    	var sfEls = document.getElementById("menu").getElementsByTagName("LI");
    	for (var i=0; i<sfEls.length; i++) {
    		sfEls[i].onmouseover=function() {
    			this.className+=" sfhover";
    		}
    		sfEls[i].onmouseout=function() {
    			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    		}
    	}
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    
    
    </script>
    <body>
    <ul id="menu">
      <li><a href="#" title="" class="home">Home</a></li>
      <li><a href="#" title="" class="debt-relief-options">Debt Relief Options</a>
        <ul id="dro">
          <li><a href="#" title="">Do Nothing</a></li>
          <li><a href="#" title="">Accelerated Debt Payoff</a></li>
          <li><a href="#" title="">Debt Consolidation</a></li>
          <li><a href="#" title="">Consumer Credit Counseling</a></li>
          <li><a href="#" title="">Debt Settlement</a></li>
          <li><a href="#" title="">Bankruptcy</a></li>
          <li><a href="#" title="">Comparison of Debt Relief Options</a></li>
        </ul>
      </li>
      <li><a href="#" title="" class="debt-settlement-services">Debt Settlement Services</a>
        <ul id="drs">
          <li><a href="#" title="">Free Do-It-Yourself Debt Settlement</a></li>
          <li><a href="#" title="">Do-It-Yourself Debt Settlement with Support</a></li>
          <li><a href="#" title="">Full Service Debt Settlement</a></li>
          <li><a href="#" title="">Debt Settlement Services Comparison</a></li>
        </ul>
      </li>
      <li><a href="#" title="" class="financial-help-center">Financial Help Center</a>
        <ul id="fhc">
          <li><a href="#" title="">Debt Calculators</a></li>
          <li><a href="#" title="">Glossary</a></li>
          <li><a href="#" title="">Debt Relief Articles</a></li>
        </ul>
      </li>
      <li><a href="#" title="" class="about-us">About Us</a>
        <ul id="con">
          <li><a href="#" title="">Contact Us</a></li>
          <li><a href="#" title="">Press Room</a></li>
        </ul>
      </li>
      <li><a href="#" title="" class="blog">Blog</a></li>
    </ul>
    </body>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Not sure if this is the problem you are talking about but this allows the submenu to overlap the next item on the list.

    Code:
    #menu li:hover , #menu li.sfhover {z-index:99}

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Location
    San Diego
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is exactly what i was looking for. Thank you Paul.


Bookmarks

Posting Permissions

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