css hover menü klappt wieder ein
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
Code:
#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 :DDDD
