Autor Zpráva
Honza Kouřil
Profil
Zdravím,

z jecas.cz jsem si stáhnul návod na plynule se posouvající :hover efekt, ale nemůžu přijít na to, jak z níže uvedeného udělám vysouvací menu:

<html>
<head>
<style>

.menu {
    position: relative;
    overflow: hidden;
    background: rgb(10,20,40);
}

.menu a {
    float: left;
    width: 100px;
    text-align: center;
    padding: .5em 0 .7em 0;
    text-decoration: none;
    color: #fff;
    z-index: 1;
    

position: relative;
}

.menu span {
    position: absolute;
    height: 100%;
    background: #1081DD;
    border-bottom: 5px solid #8ECCF0;
    width: 100px;
    bottom: 0;
  

  left: -100px;
    transition: left .2s;
}


.menu a:nth-child(1):hover ~ span {left: 0}
.menu a:nth-child(2):hover ~ span {left: 100px}
.menu a:nth-child(3):hover ~ span {left: 200px}
.menu a:nth-child(4):hover ~ span {left: 300px}
.menu a:nth-child(5):hover ~ span {left: 400px}
.menu a:nth-child(6):hover ~ span {left: 500px}

</style>
</head>

<body>
<div class="menu">
    
<a href="">Text odkazu</a>
  
<a href="">Text odkazu</a>

<span></span>
</div>
</body>
</html>


Předem díky za radu.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: