title: CSS Horizontal sub-menu
body: <p>I am working on a horizontal CSS dropdown menu. It is still working nearly fine for IE 7, IE 8 , Firefox and Chrome. But I want to make the top <code>&lt;ul&gt;</code> to be on top level (e.g. <code>z-index: 100</code>). I want this because the top level <code>&lt;ul&gt;</code> has a graphical background and the dropdown is just styled with css and in the current way it is destroying the layout. </p>
  
  <p>HTML Code:</p>
  
  <pre><code>&lt;div id="mainMenu"&gt; 
      &lt;ul&gt; 
          &lt;li&gt;&lt;a href="t1"&gt;TOP1&lt;!--[if gt IE 6]&gt;&lt;!--&gt;&lt;/a&gt;&lt;!--&lt;![endif]--&gt;
          &lt;!--[if lte IE 6]&gt;&lt;table&gt;&lt;tr&gt;&lt;td&gt;&lt;![endif]--&gt; 
              &lt;ul&gt; 
                  &lt;li&gt;&lt;a href="l1"&gt;LINK1&lt;/a&gt;&lt;/li&gt; 
                  &lt;li&gt;&lt;a href="l2"&gt;LINK2&lt;/a&gt;&lt;/li&gt; 
                  &lt;li&gt;&lt;a href="l3"&gt;LINK3&lt;/a&gt;&lt;/li&gt; 
                  &lt;li&gt;&lt;a href="l4"&gt;LINK4&lt;/a&gt;&lt;/li&gt; 
              &lt;/ul&gt;
          &lt;!--[if lte IE 6]&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/a&gt;&lt;![endif]--&gt; 
          &lt;/li&gt;
          &lt;li class="center"&gt;&lt;a href="t2"&gt;TOP2&lt;!--[if gt IE 6]&gt;&lt;!--&gt;&lt;/a&gt;&lt;!--&lt;![endif]--&gt;
          &lt;!--[if lte IE 6]&gt;&lt;table&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/a&gt;&lt;![endif]--&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a name="t3"&gt;TOP3&lt;!--[if gt IE 6]&gt;&lt;!--&gt;&lt;/a&gt;&lt;!--&lt;![endif]--&gt; 
          &lt;!--[if lte IE 6]&gt;&lt;table&gt;&lt;tr&gt;&lt;td&gt;&lt;![endif]--&gt; 
              &lt;ul class="last"&gt; 
                  &lt;li&gt;&lt;a href="l5"&gt;LINK5&lt;/a&gt;&lt;/li&gt; 
                  &lt;li&gt;&lt;a href="l6"&gt;LINK6&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="l7"&gt;LINK7&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt; 
          &lt;!--[if lte IE 6]&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/a&gt;&lt;![endif]--&gt; 
          &lt;/li&gt; 
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS Code</p>
  
  <pre><code>/* style the outer div to give it width */
  #mainMenu {
      position: absolute;
      margin-left: 6px;
      margin-top: 180px;
  }
  
  /* remove all the bullets, borders and padding from the default list styling */
  #mainMenu ul {
      position: absolute;
      width: 494px; 
      padding: 0;
      margin: 0;
      list-style-type: none;
      background: #FFF url(../images/mainMenu_bg.gif) no-repeat;
  }
  
  /* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
  #mainMenu li {
      position: relative;
      float: left;
      padding-left: 5px;
      width: 160px;
      vertical-align: middle;
      text-align: left;
  }
  
  #mainMenu li.center {
      padding-left: 0px;
      text-align: center;
  }
  
  /* style the links for the top level */
  #mainMenu a, #mainMenu a:visited {
      display: block;
      font: bold 12px/1em Helvetica, arial, sans-serif;
      color: #FFF;
      text-decoration: none;
      height: 42px;
      line-height: 35px;
  }
  
  /* hide the sub levels and give them a positon absolute so that they take up no room */
  #mainMenu ul ul {
      visibility: hidden;
      position: absolute;
      height: 0;
      top: 35px;
      left: -5px;
      width: 165px;
  }
  
  /* style the table so that it takes no part in the layout - required for IE to work */
  #mainMenu table {
      position: absolute; 
      top: 0;
      left: 0;
  }
  
  /* style the second level links */
  #mainMenu ul ul a, #mainMenu ul ul a:visited {
      width: 165px;
      height: 20px;
      line-height: 19px;
      font: bold 10px Helvetica, arial, sans-serif;
      background: #EF7D0E;
      color: #FFF;
      text-align: left;
      padding: 6px 0 0 5px;
      border-top: 1px solid #C1650B;
  }
  
  #mainMenu ul ul.last a, #mainMenu ul ul.last a:visited {
      width: 162px;
  }
  
  /* style the top level hover */
  #mainMenu a:hover, #mainMenu ul ul a:hover{
      color: #FFF; 
      text-decoration: underline;
  }
  
  #mainMenu :hover &gt; a, #mainMenu ul ul :hover &gt; a {
      color: #FFF;
      text-decoration: underline;
  }
  
  /* make the second level visible when hover on first level list OR link */
  #mainMenu ul li:hover ul,
  #mainMenu ul a:hover ul{
      visibility: visible; 
  }
  </code></pre>
  
  <p>I have still a problem with showing the table in IE 6 but my main problem here is to show the LINK1...6 under the TOP links.</p>
  
  <p>I have tried many settings with <code>z-index</code> but nothing worked here.
  I hope you can help me ;)</p>