• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Menü klappt sofort wieder zu

rofl1234567

Mitglied
Hey Leute kann mir jemand von euch erklären wieso dass Dropdown Menü bei mir nicht funktioniert
Es klappt zwar wie gewollt auf, jedoch wenn ich auf dass aufgeklappte gehen will klappt es sofort wieder zu obwohl ich dass richtig eingestellt habe.

CSS:
#menu {
    height: 100px;
    width: 900px;
    margin-left: 500px;
    margin-top: 0;
    position: relative;
}
#menu h3 {
    font-size: 16px;
    color: #fff;
    padding: 10px;
    margin: 0;
    background: #000;
    line-height: 20px;
}
#menu ul {
    position: absolute;
    margin: 0 auto;
    list-style: none;
}
#menu ul li {
    float: left;
    margin: 0 0 0 0px;
    font-size: 20px;
    font-family: 'Bree Serif', serif;
    line-height: 50px;
}
#menu ul li a {
    color: #000;
    text-decoration: none;  
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}
#menu ul li a:hover {
    color: #999;
}
#menu ul li img {
    float: left;
    width: 16px;
    height: 16px;
    margin: 14px 5px;
    padding: 6px;
    background: #999;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}
#menu ul li:hover img {
    background: #000;
}
#menu ul ul {
    position: absolute;
    top: -9999px;
    background: #fff;
    padding: 0;
    margin: 0 0 0 -5px;
    -webkit-box-shadow: 0 10px 20px #888;
    -moz-box-shadow: 0 10px 20px #888;
    box-shadow: 0 10px 20px #888;
}
#menu ul ul:before {
    position: absolute;
    content:"";
    width: 10px;
    height: 10px;
    top: -5px;
    left: 20px;
    background: #000;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
#menu ul li:hover ul {
    top: 55px;
}
#menu ul ul li {
    float: none;
    font-size: 16px;
    padding: 5px 10px;
    text-align: left;
    text-transform: uppercase;
    margin: 0;
    border-bottom: 1px solid #ddd;
    line-height: 20px;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}
#menu ul ul a {
    color: #333;
    text-decoration: none;
}
#menu ul ul li.all {
    font-size: 12px;
    border-bottom: none;
    text-transform: none;
}
#menu ul ul li:hover {
    background: #333;
    color: #fff;
}
 
Zuletzt bearbeitet von einem Moderator:
Werbung:
Es klappt zwar wie gewollt auf, jedoch wenn ich auf dass aufgeklappte gehen will klappt es sofort wieder zu obwohl ich dass richtig eingestellt habe.
Dein Konzept funktioniert derzeit, wenn sich der Mauszeiger im Bereich des ::before-Pseudoelements bewegt :D

Links und rechts von ihm existiert zwischen Hauptmenüpunkt und Untermenü eine 5px-Lücke, die das Untermenü vorzeitig schliesst, wenn der Mauszeiger sich darin befindet.

Lösung:
CSS:
#menu ul li:hover ul {
/*top:55px; auskommentiert */
top: 50px;
padding-top: 5px;
}
Fiddle-Demo: https://jsfiddle.net/SpiceLab/df98xo38/
 
Werbung:
Zurück
Oben