title: CSS dropdown menu not working with position:relative?
body: <p>I want to build a simple CSS dropdown menu. It works if I use absolute positioning, but starts to push down the content if I use relative positioning. What is the reason for this? Using absolute positioning for the DIVs menu and content is not an option for me unfortunately.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="menu"&gt;
      &lt;ul&gt;
        &lt;li class="topmenu"&gt;
          &lt;a href=""&gt;Top 1&lt;/a&gt;
          &lt;ul&gt;
            &lt;li class="submenu"&gt;&lt;a href=""&gt;Sub 1&lt;/a&gt;&lt;/li&gt;
            &lt;li class="submenu"&gt;&lt;a href=""&gt;Sub 2&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div id="content"&gt;
  Test
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#menu {
    position:relative;  
  }
  
  #menu ul {
    list-style-type:none;
    list-style-image:none;
    margin:0px;
    padding:0px;
  }
  
  #menu li.topmenu {
    float:left;
  }
  
  .topmenu a {
    float:left;
    width:110px;
  }
  
  .topmenu ul{
    display:none;
  }
  
  .submenu a{
    width:110px;
    clear:both;
  }
  
  .topmenu:hover ul {
    display:block;  
    z-index:10;
  }
  #content {
      display: block;
      clear: both;
      z-index: 1;
  }
  </code></pre>