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="#">…</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?