title: Layering elements on top of each other with css
body: <p>I have been playing around with this sliding drop-down jquery menu. I moved the drop-down area up a little bit with a negative margin. I was hoping there would be a way to layer the drop down on top of the parent element that is the trigger for the action. I tried z-index but no luck. Anyone know what I am doing wrong?</p>
  
  <p>Here it is live: <a href="http://daveywhitney.com/overlay/sliding_menu.html" rel="nofollow">http://daveywhitney.com/overlay/sliding_menu.html</a></p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Sliding Menu Tutorial | HV-DESIGNS.CO.UK&lt;/title&gt;
  &lt;link href="style.css" rel="stylesheet" type="text/css" /&gt;
  &lt;script type="text/javascript" src="js/jquery.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/slider.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="container"&gt;
  &lt;div id="header"&gt;
  &lt;/div&gt;
  
  &lt;div id="button"&gt;
  &lt;div id="trigger"&gt;
  &lt;img src="images/button.png" width="184" height="32" class="menu_class" /&gt;
  &lt;/div&gt;
  &lt;ul class="the_menu"&gt;
  &lt;li&gt;&lt;a href="#"&gt;A Website #1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;A Website #2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;A Link #1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;A Link #2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;A Website #3&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;A Website #4&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;A Link #3&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;A Link #4&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  body {
      font-family:Arial, Helvetica, sans-serif;
      font-size:12px;
      background-color: #333333;
  }
  
  #container {
      margin: auto;
      width: 490px;
  }
  
  #header {
      background-image: url(images/header.png);
      background-repeat: no-repeat;
      height: 42px;
      width: 490px;
      margin-bottom: 20px;
  }
  
  #button {
      height: 32px;
      width: 184px;
      margin: auto;
  }
  
  ul, li {
      margin:0; 
      padding:0; 
      list-style:none;
  }
  
  .menu_class {
      border:1px solid #1c1c1c;
  
  }
  #trigger {
      z-index:-1;
  }
  .the_menu {
      display:none;
      width:300px;
      border: 1px solid #1c1c1c;
      margin:-50px 0 0 50px;
      z-index:100;
  }
  
  .the_menu li {
      background-color: #302f2f;
  }
  
  .the_menu li a {
      color:#FFFFFF; 
      text-decoration:none; 
      padding:10px; 
      display:block;
  }
  
  .the_menu li a:hover {
      padding:10px;
      font-weight:bold;
      color: #F00880;
  }
  </code></pre>