[ERLEDIGT] Menü klappt sofort wieder zu

[rofl1234567]

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.

#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;
}

 

[SpiceLab]

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

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:

#menu ul li:hover ul {
/*top:55px; auskommentiert */
top: 50px;
padding-top: 5px;
}

Fiddle-Demo: https://jsfiddle.net/SpiceLab/df98xo38/

 

[rofl1234567]

Vielen Dank für die schnelle Hilfe :)

 

[SpiceLab]

Vielen Dank für die schnelle Hilfe :)

Gern geschehen :) Warum auch warten lassen?