title: Odd behaviour of HTML5 navigation
body: <p>Here is the html code of the page's navigation:</p>
  
  <pre><code>&lt;nav&gt;
  &lt;ul id="navigation"&gt;
  &lt;A class="scroll" href="#first"&gt;Hjem&lt;/A&gt;
  &lt;A class="scroll" href="#second"&gt;Info&lt;/A&gt;
  &lt;A class="scroll" href="#third"&gt;Pris&lt;/A&gt;
  &lt;li style="display: inline;"&gt;&lt;A class="scroll" href="#"&gt;Brugervejledninger &amp;raquo;&lt;/A&gt;
  &lt;ul&gt;
      &lt;li&gt;&lt;a href="pdf/arbejdsleder.pdf" target="_blank"&gt;arbejdsleder&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="pdf/medarbejder.pdf" target="_blank"&gt;medarbejder&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  
  &lt;a id="login-button" href="http://mintimeseddel.dk/scheduling/users"&gt;Log ind&lt;/a&gt;
  &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>And following is the css used to style it:</p>
  
  <pre><code>ul#navigation li:hover &gt; ul
  {
      visibility:visible;
      opacity:1;
  }
  
  ul#navigation ul, ul#navigation ul li ul {
      list-style: none;
      margin: 0;
      padding: 0;    
      visibility:hidden;
      position: absolute;
      z-index: 99999;
      width:180px;
      background:#f8f8f8;
      box-shadow:1px 1px 3px #ccc;
      opacity:0;
      -webkit-transition:opacity 0.2s linear, visibility 0.2s linear; 
      -moz-transition:opacity 0.2s linear, visibility 0.2s linear; 
      -o-transition:opacity 0.2s linear, visibility 0.2s linear; 
      transition:opacity 0.2s linear, visibility 0.2s linear;     
  }
  
  ul#navigation ul {
      top: 43px;
      left: 43%;
  }
  
  ul#navigation ul li ul {
      top: 0;
      left: 181px;
  }
  
  ul#navigation ul li {
      clear:both;
      width:100%;
      border:0 none;
      border-bottom:1px solid #c9c9c9;
  }
  
  ul#navigation ul li a {
      background:none;
      padding:7px 15px;
      color:#616161;
      text-shadow:1px 1px 0px #fff;
      text-decoration:none;
      display:inline-block;
      border:0 none;
      float:left;
      clear:both;
      width:150px;
  }
  </code></pre>
  
  <p>Everything works as expected on the localhost, but the problem occurs once the site is uploaded to the live server, the navigation menu gets messed up. Even though it is browser specific: on firefox it always shows up properly, while the other browsers need to reload the page a few times to get it right.</p>
  
  <p>A live example of it can be seen at: www.mintimeseddel.dk</p>
  
  <p>Any help is much appreciated.</p>