Hallo Jens,
ich würde mal vermuten, in der .de wird das Ganze über das menu.js (menumatic) gelöst. In Deinem Falle sollte an sich ein hover auf die erste li Ebene im #mainmenu reichen. Ich hänge hier mal eine css Datei rein, mit der gewünschte Effekt funktioniert. Allerdings auf Basis der a Tags innerhalb der Navi und hier fahren die Untermenüs auf (über height-Änderungen der li) und es gibt einen Transparenz-Effekt. Den Schnickschnack müsstest Du ggf. wieder raus nehmen.
HTML-Code:
#navi-main {
clear:both;
margin:0 1%;
}
#navi-main a {
color:#000;
display:block;
}
#navi-main ul.level_1 > li > a, #navi-main ul.level_1 > li > span {
padding:3px 10px 5px;
font-family: 'Kotta One', serif;
font-size:1.2em;
text-align:center;
text-shadow:1px 1px 1px #999;
background-color:#f7f7f7;
border-top-left-radius:10px;
border-top-right-radius:10px;
box-shadow:inset 0 2px 3px -2px #999;
opacity:.6;
transition: opacity .5s; /* explorer 10 */
-webkit-transition: opacity .5s; /* chrome & safari */
-moz-transition: opacity .5s; /* firefox */
-o-transition: opacity .5s; /* opera */
}
#navi-main ul.level_1 > li > ul > li > a {
color:#666;
}
#navi-main ul.level_1 > li > ul > li > a:hover {
color:#00800F;
text-shadow:1px 1px 1px #ccc;
}
#navi-main ul.level_1 > li > span {
display:block;
}
#navi-main ul.level_1 > li:hover > a, #navi-main ul.level_1 > li.active > a, #navi-main ul.level_1 > li.trail > a, #navi-main ul.level_1 > li > span {
opacity:1;
}
#navi-main ul, #navi-main li {
padding:0;
margin:0;
list-style-type:none;
min-width:139px;
}
#navi-main ul.level_1 {
margin:15px 0;
}
#navi-main ul.level_1 > li {
float:left;
margin:0 .5px;
}
#navi-main ul.level_1 > li > ul {
position:absolute;
opacity:0;
padding:1px 0;
font-size:1em;
box-shadow:2px 2px 5px -2px #999;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
z-index:1000;
}
#navi-main ul.level_1 > li > ul > li {
height:0;
white-space: nowrap;
padding:3px 10px;
background-color:#f7f7f7;
border-bottom:1px solid #ccc;
}
#navi-main ul.level_1 > li > ul > li:hover {
background-color:#fff;
}
#navi-main ul.level_1 > li > ul > li.last {
border:0;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}
Grundsätzlich braucht es dafür kein Script mehr und die Navi würde schon funzen, aber sobald im Browser (vornehmlich FF) mehrere Registerkarten auf sind, fängt die Variangte ohne Script an zu hakeln und unrund zu laufen,daher habe ich das Ganze noch mit einem kleinen Script aufgepimpt und nun läuft es eigentlich immer und überall stabil und wie es soll.
HTML-Code:
<script>
window.addEvent('domready', function(){
$('ul-navi-main').getElements('li').addEvents({
mouseenter: function(){
this.getElements('ul').set('tween', {
duration: 150,
transition: Fx.Transitions.Expo.in // This could have been also 'bounce:out'
}).tween('opacity', '.9');
this.getElements('li').set('tween', {
duration: 250,
transition: Fx.Transitions.Expo.in // This could have been also 'bounce:out'
}).tween('height', '20px');
},
mouseleave: function(){
this.getElements('ul').set('tween', {}).tween('opacity', '0');
this.getElements('li').set('tween', {}).tween('height', '0');
}
});
});
</script>
Ohne den Ausfahr- und Transparenz-Effekt sollte es aber wie gesagt auch ohne Script funzen.
Lesezeichen