Odd behaviour of HTML5 navigation - html

Question

Here is the html code of the page's navigation:
<nav>
<ul id="navigation">
<A class="scroll" href="#first">Hjem</A>
<A class="scroll" href="#second">Info</A>
<A class="scroll" href="#third">Pris</A>
<li style="display: inline;"><A class="scroll" href="#">Brugervejledninger »</A>
<ul>
<li>arbejdsleder</li>
<li>medarbejder</li>
</ul>
</li>
<a id="login-button" href="http://mintimeseddel.dk/scheduling/users">Log ind</a>
</ul>
</nav>
And following is the css used to style it:
ul#navigation li:hover > 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;
}
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.
A live example of it can be seen at: www.mintimeseddel.dk
Any help is much appreciated.

Answer 1

Your HTML is not valid. Browsers will interpret the invalid html differently in an effort to figure out what it is supposed to mean.
Namely, you can't put anchors ('a') directly inside of unordered lists ('ul'), the only valid child of a list is a list item ('li'). In other words, you need to wrap an 'li' tag around the 'a' tags.
Some browsers will close the list and display the anchors inside of the list's parent element (a 'nav' in this case). Other browsers will transparently wrap the anchors in a list entry. Others still will try to render the anchors where they are.
If you fix the HTML, the rest should start to work consistently (although you might have to go back and redo the CSS).
EDIT To respond to OP's comment: The HTML should look like this:
<nav>
<ul id="navigation">
<!-- note the new 'li' tags here -->
<li><a class="scroll" href="#first">Hjem</a></li>
<li><a class="scroll" href="#second">Info</a></li>
<li><a class="scroll" href="#third">Pris</a></li>
<li style="display: inline;"><A class="scroll" href="#">Brugervejledninger »</A>
<ul>
<li>arbejdsleder</li>
<li>medarbejder</li>
</ul>
</li>
</ul>
<!-- and another additional 'li' tag here -->
<li><a id="login-button" href="http://mintimeseddel.dk/scheduling/users">Log ind</a></li>
</nav>