title: Dropdown menus not appearing in correct place for Firefox
body: <p>I have created some drop down menus (which appear if you hover over their parent's link), the drop down menus simply contain links; nothing special.</p>
  
  <p>They work absolutely fine when using Google Chrome (under their parent), but they always appear towards the far left hand side of the screen when using Mozilla Firefox.</p>
  
  <p>Does anyone have any idea as to why this may be happening?</p>
  
  <p><strong>Google Chrome:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/tEASK.png" alt="Google Chrome Working"></p>
  
  <p><strong>Mozilla Firefox:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/9LR7S.png" alt="Mozilla Firefox Not Working"></p>
  
  <p><strong>Drop down HTML inspect example:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/jgLtv.png" alt="Drop down HTML inspect example"></p>
  
  <p><strong>Relevant CSS:</strong></p>
  
  <pre><code>/* Sub menu styles */
  #headermenu td.hasSubMenu ul {
      display: block;
      float: left;
      position: absolute;
      list-style: none;
      min-width: 200px;
      left: -999em;
      padding: 10px 10px;
      text-align: left;
      background-color: #89B0F1;
      z-index: 100;
      border-top-right-radius: 3px;
      border-bottom-left-radius: 3px;
      border-bottom-right-radius: 3px;
      box-shadow: 0px 3px 10px 0px #000000;
  }
  
  #headermenu td.hasSubMenu li {
      padding: 10px 5px;
      color: #252B76;
  }
  
  #headermenu td.hasSubMenu:hover ul {
      left: 0px;
      top: auto;
  }
  
  #headermenu td.hasSubMenu li:hover {
      background-color: #252B76;
      color: #FFFFFF;
  }
  
  #headermenu td.hasSubMenu li:hover a {
      color: #FFFFFF;
  }
  </code></pre>
  
  <p>Your help is much appreciated. :)</p>