css hover menü klappt wieder ein

[d3x84]

Hi zusammen,
mal wieder muss ich mit einer Frage nerven
Ich habe schon einige Zeit herumprobiert bekomme aber diese 2 Dinge nicht richtig in den Griff

Problem Nr 1:
Wenn ich mit der Mouse über mein Menü :hover und die mouse nach unten bewege geht das :hover
wieder zu sobald ich den li bzw span bereich wieder verlasse

ich habe schon auf verschiedene art die li,span in level 1,2 nach dem hover zu vergrößern bekomme es aber nicht richtig hin...



Problem Nr 2:

Wenn ich auf meinem Handy in level 1 auf den menüpunkt klicke geht das menü zwar nun auf aber:
es geht auch immer wieder direkt wieder zu, aber nicht immer...
außerdem klickt/drückt man oft auch wenn man auf einen level 1 menüpunkt auf dem handy drückt immer mal wieder auf ein level 2 punkt
ohne diesen auf dem touchscreen wirklich gedrückt bzw geklickt zu haben
die tatsache verwirrt mich etwas

#mainmenu {
    width:100%;
    height:100%;
    position:relative;
    overflow:visible;
    background-color:#666;
    border-top:1px solid #666;
    border-right:1px solid #666;
    -moz-border-radius-topleft:5px;
    -webkit-border-top-left-radius:5px;
    border-top-left-radius:5px;
    -moz-border-radius-topright:5px;
    -webkit-border-top-right-radius:5px;
    border-top-right-radius:5px;
    z-index:999999;
}

#mainmenu ul {
    margin:0;
    padding:0;
    list-style-type:none;
}

#mainmenu ul.level_1 li {
    display:inline-block;
}

#mainmenu ul.level_1 {
    padding-top:5px;
    padding-bottom:5px;
}

#mainmenu ul.level_2 {
    display:none;
}

#mainmenu ul.level_1 li:hover > ul.level_2 {
    position:absolute;
    display:block;
}

#mainmenu ul.level_2 li {
    width:100%;
    display:block;
}

#mainmenu ul li span {
    font-size:25px;
    line-height:25px;
    font-weight:bold;
    text-decoration:none;
    color:#6dbbba;
}

#mainmenu ul li a {
    font-size:25px;
    line-height:25px;
    font-weight:bold;
    text-decoration:none;
    color:#6dbbba;
}

#mainmenu ul.level_1 li.first {
    padding-right:67px;
    padding-left:20px;
}

#mainmenu ul.level_1 li.first+li {
    padding-right:59px;
    padding-left:59px;
}

#mainmenu ul.level_1 li.first+li+li {
    padding-right:59px;
    padding-left:59px;
}

#mainmenu ul.level_1 li.last {
    padding-right:20px;
    padding-left:67px;
}

#mainmenu ul.level_2 li {
    margin-top:5px;
    margin-bottom:5px;
}

#mainmenu ul.level_2 li.first {
    padding:0;
}

#mainmenu ul.level_2 li.first+li {
    padding:0;
}

#mainmenu ul.level_2 li.first+li+li {
    padding:0;
}

#mainmenu ul.level_2 li.last {
    padding:0;
}

#mainmenu ul.level_2 {
    top:45px;
    padding:5px 10px 10px 5px;
    background-color:#666;
    border:1px solid #666;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    behavior:url('plugins/css3pie/PIE.htc');
}

#mainmenu ul.level_1 li+li ul.level_2 {
    left:175px;
    top:45px;
    background-color:#666;
    border:1px solid #666;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    behavior:url('plugins/css3pie/PIE.htc');
}

#mainmenu ul.level_1 li+li+li ul.level_2 {
    left:550px;
    top:45px;
    background-color:#666;
    border:1px solid #666;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    behavior:url('plugins/css3pie/PIE.htc');
}

Link zur Seite:
Klick Mich DDD

[webster]

Hallo René,

zu Problem 1: Probier's mal mit top:35px für das Level_2 Menü. Grund für das ungewollte Zuklappen ist, dass Du, sobald Du versuchst mit der Maus in das Ausklappmenü zu gelangen, den Listenpunkt verlässt und dadurch der Hover-Status nicht mehr da ist. Ziehst Du allerdings das Menü weiter nach oben, so bleibt der Hover-Status erhalten und Du kannst mit der Maus in den ausgeklappten Teil. Wenn Du den "Abstand-Effekt" beibehalten willst, empfehle ich Dir ein transparentes Hintergrundbild am oberen Rand.

[plastiko]

35px würden aber voraussetzen, daß die <li>s der ersten ebene tatsächlich 35px hoch sind.
Das ist aber je nach Browser, Browsereinstellungen und Schrift nicht immer so.
Die Angaben für top in der zweiten Ebene würde ich ganz weglassen.
Die Hintergudfarben könnten die li aus der zweiten Ebene bekommen anstelle der ul.
Die oberen runden Ecken könnte das erste li in in der zweiten Ebene bekommen. Die unteren das letzte li.
Die nötigen klassen sind ja vorhanden (.first und .last).

[d3x84]

Hi,
danke für die antworten

EDIT:
Wie muss ich das menü bearbeiten, dass man das menü auch ordentlich auf dem handy ansehen kann?

wenn ich im handy das menü anklicke tritt der hover effekt zwar ein aber das menu geht zumeist wieder zu...

[dBub]

Bei der Bedienung per „Touch“ gibt es weder Mouseover noch Hover-Effekte.
Du musst eine Abfrage bringen, die mobile Endgeräte erkennt und dann dafür eine Navigation bringen, die nur auf Klick reagiert.
Stöbere mal in "Responsive Webdesign". Da sollte es thematisiert sein.