Jak w temacie.
Korzystam ze sztuczki wyświetlania się <li> po zajściu :hover na <ol>. Problem w tym, że div umieszczony w tej samej linii co owa lista, po zajściu ww. hover'a ucieka w prawo, niejako robiąc miejsce do właśnie pojawiających się <li>, mimo tego, że optycznie są one poniżej pudełka w którym te elementy są.
Czy jest jakiś sposób na uniknięcie tego?
HTML:
<nav>
<div class="menu">
<ul><a href="#">
<img src="pic/vinyl.png" height="80" width="80">
</a>
<li>Komis/sklep płyt i adepterów</li>
<li>Tłoczenie płyt na zamówienie</li>
<li>Serwis adapterów</li>
<li>Forum użytkowników</li>
</ul>
</div>
<div class="logo">
vinylshop
</div>
</nav>
CSS:
nav
{
background-color:#E5E5E5;
opacity:0.7;
margin-left:auto;
margin-right:auto;
border-radius:15px;
height:90px;
padding:0;
}
.menu
{
float:left;
font-size:25px;
height:62px;
margin-top:-18px;
margin-left:-20px;
}
.menu2
{
transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform:rotate(90deg);
display:inline-block;
vertical-align:20;
margin-left:-30px;
border-top:10px solid #000;
}
ul > li
{
display:none;
position:relative;
z-index:100;
list-style-type:none;
margin-top:10px;
background-color:rgba(229, 229, 229);
border-radius:15px;
padding:5px;
position:relative;
z-index:100;
}
ul:hover > li
{
display:block;
list-style-type:none;
background-color:rgba(229, 229, 229);
border-radius:15px;
padding:5px;
}
.logo
{
font-family:'Saira Stencil One', cursive;
font-size:60px;
display:inline-block;
vertical-align:20;
padding-left:40%;
margin-top:0px;
height:80px;
}