Rozjeżdżające się elementy <ol> po wyświetleniu się zagnieżdżonej listy

pytanie zadane 9 grudnia 2018 w HTML i CSS przez vingilot85 Obywatel (1,150 p.)

Witam,

jak w temacie. Zrobiłem w topbar dwie listy <ol> - obok siebie (float:left;), korzystające jedna z encji html, druga z fontello. Chciałem aby rozwijały zagnieżdżone w nich listy <ul>, po najechaniu kursorem (hover). Wszystko fajnie działa, tylko te dwa elementy zmieniają koślawie miejsce, kiedy lista się rozwija. Przesuwają się w prawo, tak, aby być mniej więcej pośrodku, ponad otwartą właśnie zagnieżdżoną listą.

Kod HTML

<div id="list">
					<ol>
						<li><a href="#">&#8230;</a>
							<ul>
								<li><a href="#">Projekty</a></li>
								<li><a href="#">O nas</a></li>
								<li><a href="#">Kompetencje</a></li>
								<li><a href="#">Kariera</a></li>
								<li><a href="#">Blog</a></li>
								<li><a href="#">Kontakt</a></li>
							</ul>
						</li>
						<li><i class="icon-mail"></i>
							<ul>
								<li><a href="#">Dział marketingu</a></li>
								<li><a href="#">Dział rekrutacji</a></li>
								<li><a href="#">Dział kontaktu z klientem</a></li>
								<li><a href="#">Dział programistyczny</a></li>
								<li><a href="#">Dział elektroniki</a></li>
							</ul>
						</li>
					</ol> 
						
			</div>

CSS:

ol
{
	margin-top:0px;
	padding:0px 10px 0px 10px;
	position:fixed;
	
}

ol > li
{
	float:left;
	list-style-type:none;
}

ol > li > ul > li
{
	background-color:#ffffff;
	background-color:rgba(255,255,255,0.5);
	font-size:18px;
	list-style-type:none;
	line-height:65px;
	font-size:36px; 
	padding-top:0px;
	z-index:100;
	display:none;
}
	
ol > li:hover > ul > li
{
	display:block;
	background-color:rgba(255,255,255,0.5);
	font-size:18px;
	list-style-type:none;
	line-height:65px;
	font-size:36px; 
	position:relative;
	z-index:100;
}

Ma ktoś jaka poradę, jak temu zaradzić? Aby elementy ol > li nie rozłaziły się po hover'ze?

1 odpowiedź

odpowiedź 9 grudnia 2018 przez arces Pasjonat (17,700 p.)

Nadaj zagnieżdżonym listom pozycję absolutną i odpowiednio ustaw.

komentarz 9 grudnia 2018 przez vingilot85 Obywatel (1,150 p.)
edycja 9 grudnia 2018 przez vingilot85

Działa, dzięki. Tyle, że teraz treść tych list najeżdża na siebie. Rozwijają się maksymalnie na height najdłuższego zdania w zagnieżdżonej liście, przenikając się z innymi.

Jakiś pomysł jak temu zaradzić?

komentarz 9 grudnia 2018 przez arces Pasjonat (17,700 p.)

Jeżeli to co wrzuciłeś jest realnym kodem, to podmenu powinno być jednak zdecydowanie mniejsze (fonty). Jeżeli jednak chcesz mieć tak duże elementy w podmenu, to po prostu nadaj rodzicom paddingi lub marginy, żeby je odsunąć od siebie. Innego wyjścia nie będziesz miał.