title: Dropdown menu not showing when using position: absolute;
body: <p>I've just turned my website into a responsive layout and along the way I've somehow managed to make my dropdown menus not work. When hovering over <strong>'Drop-downs'</strong> they don't display unless I'm using position: relative. They worked before using position: absolute - but it seems they only work with position relative now. When using relative it uses the width which messes up the navigation bar.</p>
  
  <p>Using relative: <a href="http://d.pr/i/tp5R" rel="nofollow">http://d.pr/i/tp5R</a> <br />
  Using absolute: <a href="http://d.pr/i/j7r1" rel="nofollow">http://d.pr/i/j7r1</a></p>
  
  <p><strong>CSS for my sub-menu</strong> <br /></p>
  
  <pre><code>div.left_first_header ul.sub-menu {
      width: 125px;
      top: 14px;
      z-index: 2;
      height: 100%;
      position: absolute;
      -webkit-border-radius: 0px 0px 4px 4px;
      -moz-border-radius: 0px 0px 4px 4px;
      background: url(images/drop_down_bg.jpg);
      padding-left: 15px;
      padding-right: 15px;
      background-repeat: repeat;
  }
  </code></pre>
  
  <p><strong>jQuery for the drop down functionality</strong></p>
  
  <pre><code>jQuery(document).ready(function ($) {
      jQuery("ul.dropdown li").hover(function() {
          $('ul:first',this).css('visibility', 'visible');
      }, function() {
          jQuery(this).removeClass("hover");
          jQuery('ul:first',this).css('visibility', 'hidden');
      });
  });
  </code></pre>
  
  <p><strong>My website</strong><br />
  <a href="http://wpvault.com/kahlam/" rel="nofollow">http://wpvault.com/kahlam/</a></p>
  
  <p>Considering it's 4am I've probably made a really stupid simple mistake.</p>
  
  <p>I apologise if I've missed anything.</p>