title: How do I display menu items in front of images?
body: <p>I have a horizontal navigation menu and when you hover over the menu, the items display behind the images on the webpage as opposed to in front of. How would I fix this?</p>
  
  <p>CODE: <a href="http://jsfiddle.net/MvWkZ/" rel="nofollow">http://jsfiddle.net/MvWkZ/</a></p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div id="nav"&gt;
  &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Tutorials&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Photoshop&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Illustrator&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Web Design&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#"&gt;HTML&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;CSS&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Articles&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Web Design&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;User Experience&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Inspiration&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>#nav ul ul {
  display: none;
  }
  
  #nav ul li:hover &gt; ul {
  display: block;
  }
  
  #nav ul {
  background: #efefef; 
  background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
  background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
  background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
  box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
  padding: 0 20px;
  border-radius: 10px;  
  list-style: none;
  position: relative;
  display: inline-table;
  }
  
  #nav ul:after {
      content: ""; clear: both; display: block;
  }
  
      #nav ul li {
  float: left;
  }
  #nav ul li:hover {
      background: #4b545f;
      background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
      background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
      background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
  }
      #nav ul li:hover a {
          color: #fff;
      }
  
  #nav ul li a {
      display: block; padding: 25px 40px;
      color: #757575; text-decoration: none;
  }
  
      #nav ul ul {
  background: #5f6975; border-radius: 0px; padding: 0;
  position: absolute; top: 100%;
  }
  #nav ul ul li {
      float: none; 
      border-top: 1px solid #6b727c;
      border-bottom: 1px solid #575f6a;
      position: relative;
  }
      #nav ul ul li a {
          padding: 15px 40px;
          color: #fff;
      }   
          #nav ul ul li a:hover {
              background: #4b545f;
          }
  
                      #nav ul ul ul {
  position: absolute; left: 100%; top:0;
  }
  </code></pre>