Problem z przesuniętym hoverem, gdy najeżdzam kursorem

Question

Panowie i panie bardzo proszę o pomoc.

Chce żeby moje menu pokazywało jakie ma podstrony, gdy najeżdżam na niego kursorem. Pokazuje mi i fajnie. problem w tym, że przesuwa mi się automatycznie całe menu i gdy odjeżdżam myszką wraca na swoje miejsce.

Oto moje kodziki:

<nav id="menu">
				<ul class="ok">
				<li><a href="#">Strona główna</a></li>
				<li><a href="#">Drużyny NFL</a>
						<ul>
							<li><a href="#">Buffalo Bills</li>
							<li><a href="#">Chicago Bears</li>
						</ul>
				</li>
				<li><a href="#">Polacy w NFL</a> </li>
				<li><a href="#">Futbol uniwersytecki</a></li>
				<li><a href="#">Zasady gry</a></li>
				<li><a href="#">Forum</a></li>
				<li><a href="#">Kontakt</a></li>
				</ul>
			
			
			</div>

i z css dam class ok i z hoverem

ul > li:hover
{
	background-color: #A0522D;
	
}

ul > li > ul
{
	list-style-type: none;
	padding: 0;
	margin: 0;
	height: 40px;
	display: none;
	
}

ul > li:hover > ul
{
	display: block;
}

ul  > li > ul > li
{
	
	position: relative;
	z-index: 100;
	
}


.ok
{
	list-style-type: none;
	margin-left: -50px;
	margin-top: 0;
	font-size: 18px;
	line-height: 200%;
}
.ok > li
{
	display: inline-block;							/*ukłąda obok siebie kafelki, a padding nadaje im przestrzeni */
	padding-left: 10px;
	padding-right: 10px;
}

 

Bawiłem się już w marginy, sprawdzałem czy dobrze oznaczyłem listy. Nic nie działa. 

Answer 1

Do `ul > li > ul` dodaj `position: absolute;`

No i masz odpowiedź. Polecam ci nie przeskakiwać tego etapu i trochę poczytać o właściwości position.

Jak się z tym zapoznasz to bardzo szybko zrozumiesz dlaczego to menu w taki sposób się układało. I w przyszłości będzie ci łatwiej pracować. 

Powodzenia. 

 

Answer 2

Do `ul > li > ul` dodaj `position: absolute;`

Comments

Dziękuje bardzo ! Działa!