Leider bekomme ich das sliden der Reiter mit transition nicht hin. Muss ich hierzu die Hover-Css-Rules in eine neue Div packen oder geht das auch in der gleichen?
Soweit der momentane CSS- Code dazu, Ab Zeile 50 (#navbar ul li:hover ul { }) habe ich versucht einen Slide-Effekt zu erzeugen.
Code:
@charset "utf-8";
#navbar {
text-align: left;
margin: 0 auto;
height: 35x;
width: 755px;
z-index: 2;
}
#navbar ul {
margin: 0px;
padding: 0px;
}
/* Erstellen der Tabs */
#navbar ul li {
background-color: #333333;
float: left;
border: 1px solid #FFF;
position: relative;
list-style-type: none;
border-left-width: 0px;
}
/* Haupt-Style Elemente und Positionierung als Block */
#navbar ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 30px;
color: #FFF;
text-decoration: none;
text-align: center;
display: block;
height: 30px;
width: 150px;
}
/* Ausblenden der 2. Stufe */
#navbar ul ul {
position: absolute;
visibility: hidden;
top: 31px;
}
/* Sichtbarmachen der 2. Stufe */
#navbar ul li:hover ul {
visibility: visible;
-webkit-transition: height 0.3s ease-in;
-moz-transition: height 0.3s ease-in;
-o-transition: height 0.3s ease-in;
-ms-transition: height 0.3s ease-in;
transition: height 0.3s ease-in;
}
/* Sichtbarmachen der 3. Stufe */
#navbar ul li ul li:hover ul li{
visibility: visible;
left: 151px;
top: -32px;
position: relative;
}
/* Beibehaltung der grauen Farbe */
#navbar ul li:hover {
background-color: #666;
}