title: Drop down menu items not visible
body: <p>I have made a navigation menu bar and also two dropdown menus with 3 items each. My problem is that, below this menu, I have a slider, so when I hover my dropdown, two of the three items are hidden behind the slider.</p>
  
  <p>How can I solve this?</p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;div id="nav"&gt;
      &lt;div id="nav_wrapper"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;item #1&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt; &lt;a href="#"&gt;item #2&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt; &lt;a href="#"&gt;dropdown #1&lt;/a&gt;
  
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#"&gt;dropdown #1 item #1&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;dropdown #1 item #2&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;dropdown #1 item #3&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt; &lt;a href="#"&gt;dropdown #2&lt;/a&gt;
  
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#"&gt;dropdown #2 item #1&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;dropdown #2 item #2&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;dropdown #2 item #3&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt; &lt;a href="#"&gt;item #3&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>#nav {
      background-color: #222;
  }
  #nav_wrapper {
      width: 960px;
      margin: 0 auto;
      text-align: left;
  }
  #nav ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
      position: relative;
      min-width: 200px;
  }
  #nav ul li {
      display: inline-block;
  }
  #nav ul li:hover {
      background-color: #333;
  }
  #nav ul li a, visited {
      color: #CCC;
      display: block;
      padding: 15px;
      text-decoration: none;
  }
  #nav ul li:hover ul {
      display: block;
  }
  #nav ul ul {
      display: none;
      position: absolute;
      background-color: #333;
      border: 5px solid #222;
      border-top: 0;
      margin-left: -5px;
  }
  #nav ul ul li {
      display: block;
  }
  #nav ul ul li a:hover {
      color: #699;
  }
  </code></pre>