title: Dropdown Menu Not working in Firefox/Chrome
body: <p>So lets just say i got it all to work on IE since its always IE that gives the problems.  But now the dropdown menu appears behind the content on other browsers like firefox and chrome.  All i did was remove the z-index in the #head div. </p>
  
  <p>Website: <a href="http://www.stingrayimages.ca/" rel="nofollow">http://www.stingrayimages.ca/</a></p>
  
  <p>With Z-index: it breaks in IE 
  Without it it fails in other browsers.</p>
  
  <p>Anyway to fix the dropdown menu without adding z-index to the head div?</p>
  
  <pre><code>#head {
      position:relative;
      height: 140px;
      width: 100%;
      background: #FFF;
      filter:alpha(opacity=93);
      padding-top:20px;
      /* CSS3 standard */
      opacity:0.93;
      -moz-box-shadow: 0 0 5px black;
      -webkit-box-shadow: 0 0 5px black;
      box-shadow: 0 0 5px black;
  }
  </code></pre>