Menü mit CSS harkt plötzlich

[janschmidt]

Hallo ich habe das CSS bei meiner Webseite www.jans-reptilien.de überarbeitet und nun harkt das Menü (wenn man mit der Maus hoch und runter geht bleibt es immer an den Stellen hängen wo es ausklappt wenn man dann mit der Maus weiter runter geht klaptt es nicht mehr aus) auf der linken Seite ich verstehe aber nicht warum. Ich habe eigentlich an der Stelle nichts gemacht. Im vergleich meine Zweite Seite www.jans-pflanzenwelt.de mit altem CSS geht es sehr gut.
Habe jetzt schon ewig gesucht und alles mögliche versucht aber es geht nicht. Vielleicht kann mir ja jemand helfen.

neu www.jans-reptilien.de

#navmenu
{
height:30px;
top:32px;
position:fixed;
z-index:100;

}

#navmenu ul
{
margin:0;
line-height:28px;
width:250px;
padding:0;

}

#navmenu  li
{
list-style:none;
position:relative;
background:#868686;
border:1px #000000 solid;
}

#navmenu li li
{

left:248px;
top:-31px;
}

#navmenu ul li a
{
width: 248px;
height:28px;
display: block;

}


#navmenu ul ul {
position:absolute;
visibility:hidden;
top:30px;
z-index:100;
}

#navmenu, ul li, li li{
margin:0;
padding:0;
}
#navmenu ul li:hover ul {
visibility:visible;
}

#navmenu li:hover {
background-color:#770000;
}

#navmenu ul li:hover ul li a:hover {
background-color:#770000;
}

#navmenu a:hover {
font-weight:bold;
}  

.Sub_level
{
position:relative;
z-index:0;
color:#ffffff;
}

.Sub_level:hover
{
background-color:transparent;
z-index:100;
}

.Sub_level ul
{
position:fixed;
width:250px;
background-color:#cddce9;
left:-3000px;
visibility:hidden;
overflow:visible;
}

.Sub_level:hover ul
{
position:fixed;
visibility:visible;
top:0px;
left:0;
height:0;
}

.navweiss
{
font-size:16px;
font-family:Georgia, "Times New Roman", Times, serif;
text-align:center;
color:#ffffff;
margin:0;
padding:0;
display:block;
text-decoration:none;
}

alt www.jans-pflanzenwelt.de

#navmenu, ul li, li li{
margin:0;
padding:0;
}

#navmenu
{
width:250px;
height:30px;
top:0px;
margin-top:0px;
border-top:2px #2568b4 solid;
position:relative;
z-index:100;

}
#navmenu ul {
line-height:28px;
}

#navmenu  li
{
list-style:none;
position:relative;
background:#0c1754;
font-size:14px;
  }
 
#navmenu li h1
{
display: block;
text-decoration:none;
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
color:#4d9cdf;
border:1px #2568b4 solid;
}


#navmenu li li
{
list-style:none;
position:relative;
background:#0c1754;
left:248px;
top:-30px;
}

#navmenu ul li a
{
width: 248px;
height:28px;
display: block;
text-decoration:none;
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
color:#ffffff;
border:1px #2568b4 solid;
}


#navmenu ul ul {

position:absolute;
visibility:hidden;
top:30px;
}
#navmenu ul li:hover ul {
visibility:visible;
}

#navmenu li:hover {
background-color:#770000;
}

#navmenu ul li:hover ul li a:hover {
background-color:#770000;
}

#navmenu a:hover {
font-weight:bold;
}  

.Sub_level
{
position:relative;
z-index:0;
color:#ffffff;
}

.Sub_level:hover
{
background-color:transparent;
z-index:60;
}

.Sub_level ul
{
position:fixed;
width:250px;
background-color:#0c1754;
left:-3000px;
visibility:hidden;
overflow:visible;
}

.Sub_level:hover ul
{
position:fixed;
visibility:visible;
top:0px;
left:0;
height:0;
}

Vielen Dank im Voraus

 

[bodo92]

Schau dir mal im Inspektor die Position von div.navmenu ul li ul an dann sollte klar werden warum der von dir beschriebene Fehler auftritt.

Du hast dich scheinbar im Forum getäuscht.
@Tronjer bitte verschieben in CSS

 

[janschmidt]

Erst einmal Danke meinst du das?

#navmenu ul li:hover ul {
visibility:visible;
}

 

[Tronjer]

Du hast dich scheinbar im Forum getäuscht.
@Tronjer bitte verschieben in CSS

Ich bin kein Mod.

 

[bodo92]

Ja genau das Element meinte ich.
Du must dem ul left 248px geben und nicht dem li

Ich bin kein Mod.

Sorry meinte @threadi

 

[janschmidt]

was ist der Inspektor ?

 

[nookie]

was ist der Inspektor ?

https://developer.mozilla.org/de/docs/Tools/Seiten_Inspektor oder das Addon Firebug nutzen.

Chrome DevTools: https://developer.chrome.com/devtools

Vom IE lass lieber die Finger.

 

[janschmidt]

sorry aber ich bin verwirrt

#navmenu ul
{
margin:0;
line-height:28px;
width:250px;
padding:0;
}


#navmenu li li
{
left:248px;
top:-31px;
}

Das left-248px von #navmenu li li in #navmenu ul Ja?

 

[bodo92]

Ne ein ul weiter nach hinten also #navmenu ul li ul

 

[janschmidt]

dann läuft es zwar aber es wird dann auch das 3 Untermenü gleich mit angezeigt das war alles vorher nicht ich weiß nicht was ich da gemacht habe.

 

[janschmidt]

Tut mir leid das ich noch mal fragen muss aber wenn man jetzt auf Schlangen geht kommt immer das 3 Untermenü mit. Ich glaube ich bin Überfordert.

 

[bodo92]

#navmenu ul li:hover > ul {
visibility:visible;
}

und bitte auch das top -31 vom li in ul ;)

 

[janschmidt]

ne schau jetzt mal dann stimmt nichts mehr wenn ich das verschiebe???????????

 

[bodo92]

Und noch was:
ein <p> Element hat in <a> nichts zu suchen mach stattdessen <a class"***">
die klasse .Sublevel kannst du dir auch sparen mach stattdessen #navmenu li ul li ul li:hover usw..

 

[bodo92]

ne schau jetzt mal dann stimmt nichts mehr wenn ich das verschiebe???????????

Lass es komplett weg das top: -31px

 

[janschmidt]

Dann ist das 2 Menu eine Zeile zu Tief und das dritte immer noch gleich mit offen.

 

[bodo92]

Dann ist das 2 Menu eine Zeile zu Tief und das dritte immer noch gleich mit offen.

style.css
Zeile 258: #navmenu ul li:hover ul { durch #navmenu ul li:hover > ul { ersetzen.

das mit der Position musst du dir eben hinrücken aber es wird der ul positioniert!

 

[janschmidt]

So jetzt hab ich es vielen vielen Dank!