Float przy rozwijanym menu nie działa w niektórych przeglądarkach

Zrobiłem na stronie rozwijane menu według opisu http://kodcss.pl/kurs-css/lekcje/dzial-4/rozwijane-poziome-menu-css W przeglądarkach na komputerze działa idealne, zaś w Operze na androidzie w normalnym trybie ostatnia cześć menu jest pod a nie z boku - w trybie bez grafiki jest dobrze i w tradycyjnej przeglądarce na androida też jest dobrze. Oto pliki

Fragment pliku gora.html

		<nav role="navigation">
			<ol class="menu">
				<li>
					<a class="menu" href="http://www.jakasstrona.za.pl/">News</a>
					<a class="menu" href="http://www.jakasstrona.za.pl/jacek/jacek.php">O Jacku</a>
				</li>
				<li id="#fanclub">
					<a class="menuLink" href="#fanclub">FanClub</a>
					<ul id="fanclub">
						<li><a class="menuRozwijane" href="http://www.jakasstrona.za.pl/czlonkowie.php">Członkowie OFC</a></li>
						<li><a class="menuRozwijane" href="http://www.jakasstrona.za.pl/zapisy.php">Jak się zapisać?</a></li>
					</ul>
				</li>
				<li>
					<a class="menu" href="http://www.jakasstrona.za.pl/zdjecia.php">Zdjęcia</a>				
					<a class="menu" href="http://www.jakasstrona.za.pl/filmy.php">Filmy</a>
					<a class="menu" href="http://www.jakasstrona.za.pl/zaplanowane.php">Zaplanowane koncerty i wydarzenia</a>
					<a class="menu" href="http://www.jakasstrona.za.pl/czat.php">Czat</a>
					<a class="menu" href="http://www.jakasstrona.za.pl/ksiega.php">Księga gości</a>
					<a class="menu" href="http://www.jakasstrona.za.pl/linki.php">Linki</a>
					<a class="menuOstatni" href="http://www.jakasstrona.za.pl/kontakt.php">Kontakt</a>
				</li>
			</ol>
		</nav>

Fragment pliku style.css

ol.menu {
	width: 905px;
	list-style-type: none;
	padding: 0;
	margin: 0 auto;
	height: 1.5em;
	line-height: 1.5em;
}

ol.menu > li {
	float: left;
}

ol.menu > a {
	display: block;
}

ol.menu > li > ul {
	display: none;
	text-align: center;
	background-image: url('kolory/tlo_menu_i_dodatki2.jpg');	
	list-style-type: none;
	margin: 0;
	padding: 0;
}

ol.menu > li > ul > li {
	padding-left: 5px;
	padding-right: 5px;
}

Na pierwszym zdjęciu pokazuję jak powinno być a na drugim jak jest. Gdzie jest błąd?

Może spróbuj pokombinować automatycznymi marginami, bo wygląda na to, że w Operze menu się nie mieści dlatego, że może mieć inną rozdzielczość na Androidzie, a margin auto mógłby ustawić to zgodnie do wyświetlanej rozdzielczości i określonej przeglądarki tworząc menu responsywne.

Problem jest w zbyt małej szerokości ol.menu - musiałaby być ona wieloktrotnie większa. Ale dlaczego?

Teraz tak zrobiłem

• zabroniłem teź skalowania

Fragment pliku gora.hml

			<nav class="menu">
				<ol class="menu">
					<li>
						<a class="menu" href="http://www.jakasstrona.za.pl/">News</a>
						<a class="menu" href="http://www.jakasstrona.za.pl/jacek/jacek.php">O Jacku</a>
					</li>
					<li id="#fanclub">
						<a class="menuLink" href="#fanclub">FanClub</a>
						<ul id="fanclub">
							<li><a class="menuRozwijane" href="http://www.jakasstrona.za.pl/czlonkowie.php">Członkowie OFC</a></li>
							<li><a class="menuRozwijane" href="http://www.jakasstrona.za.pl/zapisy.php">Jak się zapisać?</a></li>
						</ul>
					</li>
					<li>
						<a class="menu" href="http://www.jakasstrona.za.pl/zdjecia.php">Zdjęcia</a>				
						<a class="menu" href="http://www.jakasstrona.za.pl/filmy.php">Filmy</a>
						<a class="menu" href="http://www.jakasstrona.za.pl/zaplanowane.php">Zaplanowane koncerty i wydarzenia</a>
						<a class="menu" href="http://www.jakasstrona.za.pl/czat.php">Czat</a>
						<a class="menu" href="http://www.jakasstrona.za.pl/ksiega.php">Księga gości</a>
						<a class="menu" href="http://www.jakasstrona.za.pl/linki.php">Linki</a>
						<a class="menuOstatni" href="http://www.jakasstrona.za.pl/kontakt.php">Kontakt</a>
					</li>
				</ol>
			</nav>

Fragment pliku css

nav.menu {
	min-width: 905px;
	max-width: 905px;
	margin: 0 auto;
}

ol.menu {
	list-style-type: none;
	padding: 0;
	margin: 0;
	height: 1.5em;
	line-height: 1.5em;
}

ol.menu > li {
	float: left;
}

ol.menu > a {
	display: block;
}

ol.menu > li > ul {
	display: none;
	text-align: center;
	background-image: url('kolory/tlo_menu_i_dodatki2.jpg');	
	list-style-type: none;
	margin: 0;
	padding: 0;
}

I też jest źle. poza tym sprawdziałem ją na http://browsershots.org/ i wszędzie, gdzie jest mała rozdzielczość ekranu, jest źle. Jak to naprawić?

Już sobie poradziłem - temat można zamkniąć