margin in FireFox

Hallo,

Ik probeer een menu te maken, maar ik stuit op een nogal vervelend probleem dat zich alleen in FireFox afspeelt. Ik gebruik de volgende code:

HTML

<nav id="navigation" role="navigation">
	<ul class="navigation-top">
		<li>
			<a href="/" title="Home">
				<span class="navigation-top-icon navigation-top-icon--home"></span>
				<span class="navigation-top-text">Home</span>
			</a>
		</li>
	</ul>
</nav>

CSS

nav#navigation
{
	height: auto;
	margin: 0px;
	position: relative;
	width: auto;
}

nav#navigation ul.navigation-top
{
	height: auto;
	list-style-type: none;
	margin: 0px 0px 10px 0px;
	padding: 0px;
	position: relative;
	width: auto;
}

nav#navigation ul.navigation-top::after
{
	clear: both;
	content: "";
	display: block;
}

nav#navigation ul.navigation-top li
{
	float: left;
	height: auto;
	position: relative;
	width: auto;
}

Het probleem is dat ik onder het menu een margin van 10 pixels wil, dit wordt ook gedaan, maar in FireFox wordt er bóven het menu ook 10 pixels aan margin toegevoegd. Het lijkt aan de combinatie van margin en float te liggen, maar dit weet ik niet zeker en het lukt me ook niet dit op te lossen.

Is dit een bekend probleem en is hier een oplossing voor? Zo ja, welke?

Alvast bedankt!