Hallo, ich habe versucht, dass Reiter der 2. Stufe bei meiner Navileiste "ausfahren", sprich sie per Standard-hidden und visible bei hover nicht sofort erscheinen, sondern ausfahren. Dies wollte ich erreichen, indem sich sobald die Maus darüber fährt, die Position der Objekte z.b. über 2 Sekunden hinweg 150px nach rechts verschiebt. Leider will es bei mir nicht so recht mit transition klappen.
Mache ich was falsch oder ist das der ganz falsche Weg?
HTML-Code:
<div id="navbar">
<ul>
<li><a href="#"> Home </a>
</li> <!-- end of Home li Tag -->
<li><a href="#"> Unsere Leistungen </a>
<ul>
<li><a href="#"> Strategischer Mehrwert </a>
<ul>
<li><a href="#"> für Unternehmen </a> </li>
<li><a href="#"> für Partner </a> </li>
</ul> <!-- end of Mehrwert ul Tag -->
</li>
<li><a href="#"> Coaching </a> </li>
<li><a href="#"> Beratung </a> </li>
<li><a href="#"> Beirat/Aufsichtsrat </a> </li>
</ul> <!-- end of Leistungen ul Tag -->
</li> <!-- end of Leistungen li Tag -->
<li><a href="#"> Finanzierung </a>
<ul>
<li><a href="#"> Kriterien </a> </li>
<li><a href="#"> Team </a> </li>
<li><a href="#"> Businessplan </a> </li>
<li><a href="#"> Beteiligungsprozess </a> </li>
<li><a href="#"> Finanzierungskonditionen </a> </li>
</ul> <!-- end of Finanzierung ul Tag -->
</li> <!-- end of Finanzierung li Tag -->
<li><a href="#"> Portfolio </a>
<ul>
<li><a href="#"> Portfoliounternehmen </a> </li>
<li><a href="#"> Exits </a> </li>
</ul> <!-- end of Portfolio ul Tag -->
</li> <!-- end of Portfolio li Tag -->
<li><a href="#"> Über uns </a>
<ul>
<li><a href="#"> Team </a> </li>
<li><a href="#"> Partner </a> </li>
<li><a href="#"> Kontakt </a> </li>
<li><a href="#"> Impressum </a> </li>
</ul> <!-- end of Über uns ul Tag -->
</li> <!-- end of Über uns li Tag -->
</ul> <!-- end of main ul Tag -->
</div>
Code:
#navbar ul li ul li:hover ul{
visibility: visible;
left: 150px;
top: 0px;
position: absolute;
/* langsames Hinterlegen in grau */
-moz-transition-property: background-color;
-moz-transition-duration: 0.8s;
/* Ausfahren TO-Do */
-moz-transition-property: left;
-moz-transition-duration: 2s
Das sollte sich doch nach dem sichtbar werden 150px über 2 Sekunden nach links verschieben, sobald man drüber fährt oder nicht?
Grüße