title: CSS navigation tab gets displayed behind the text instead of in the foreground
body: <p>I have the following css code:</p>
  
  <pre><code>#menu li { 
    float:left;
    position:relative;
    line-height: 3em;
    width: 10em; 
  } 
  #menu li ul {
    position:absolute;
    margin-top:0em;
    margin-left:.0em;
    display:none; 
  }
  #menu ul li ul {
    margin-top:0em;
    margin-left:0em;
  } 
  #menu a {
    display:block;
    border-right:1px solid #fff;
    background:#3B3B3B;
    color:#3B3B3B;
    text-decoration:none; 
    padding:0 0px;
    text-align:center;
    background: url(images/nav.gif) repeat-x 0 0;
    height: 50px;
    list-style-type: none;
  }
  #menu a:hover {
    background-color::#3B3B3B3;
    color:#fff;
    text-align:center;
    height: 50px;
    list-style-type: none;
  }
  #menu ul {
    border-top:1px solid #fff;
    float: right;
    list-style-type: none;
  } 
  #menu ul a {
    border-right:none;
    border-right:1px solid #fff;
    border-bottom:1px solid #fff;
    border-left:1px solid #fff;
    background:#fff;
    text-align:center;
    background: url(images/nav.gif) repeat-x 0 0;
    height: 50px;
  } 
  /* SHOW SUBMENU 1 */ 
  #menu li:hover ul, #menu li.over ul { 
    display:block; 
    background:#fff;
  }
  #menu li:hover ul ul, #menu li.over ul ul { 
    display:none;
  }
  /* SHOW SUBMENU 2 */ 
  #menu ul li:hover ul, #menu ul li.over ul {
    display:block; 
  } 
  </code></pre>
  
  <p>and the following HTML code</p>
  
  <pre><code>&lt;div class="shell"&gt;
    &lt;div class="cl"&gt;&amp;nbsp;&lt;/div&gt;
    &lt;ul id="menu"&gt;
      &lt;li&gt;&lt;a href="@Url.Content("~/Home/Index")"&gt;HOME&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#"&gt;CLIENTS&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="@Url.Content("~/Client/SearchClient")"&gt;CLIENT LIST&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>The problem I am having is that when the I hover my mouse over the drop down tabs - "CLIENT LIST" - It gets displayed behind the images and text that are on my page. How do I bring it to front?</p>