Hallihallo an diesen sehr sonnigen Samstag Morgen,
ich spiele gerade mit Transitions herum und habe hier mal einen Testballon in Form eines zweistufigen Flyout-Menüs gebaut:
HTML-Code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#menu {
margin-top: -100px;
transition: margin 1s ease;
width: 100px;
white-space: nowrap;
}
#menu:hover {
margin-top: 0;
}
#menu > li {
position: relative;
}
#menu ul {
width: 0;
height: 0;
overflow: hidden;
position: absolute;
top: 0;
left: 100%;
transition: width 1s ease;
}
#menu li.nested:hover ul {
width: 100px;
height: auto;
}
</style>
</head>
<body>
<ul id="menu">
<li>Eintrag 1</li>
<li>Eintrag 2</li>
<li class="nested">
Eintrag 3
<ul>
<li>Eintrag 2.1</li>
<li>Eintrag 2.2</li>
<li>Eintrag 2.3</li>
</ul>
</li>
<li>Eintrag 4</li>
<li>Eintrag 5</li>
<li>Eintrag 6</li>
<li>Eintrag 7</li>
</ul>
</body>
</html>
Es funktioniert auch alles beinahe so, wie es soll:
* Beim Hovern der obersten Ebene fährt das Menü innerhalb der Duration herunter, beim Verlassen fährt es innerhalb der Duration wieder hoch.
* Das verschachtelte UL in Eintrag 3 fährt bei Hover innerhalb der Duration aus, aber: Beim Verlassen von Eintrag 3 fährt es _sofort_ ein.
Mache ich da was falsch, oder ist das einfach der "Komplexität" geschuldet?