Hallo zusammen,
ich habe ein Menü das mittels onmousehover ein Submenü öffnet, worüber mehrer Seiten verlinkt sind:
Wie man sieht kann ich mit der Maus bis auf Seite 4 "gehen" und diese bei Bedarf anklicken.
------------------------------------------------------------------------------------------------------------------------------------------
Wenn ich aber auf einer anderen Seite diesen Menübaum öffne passiert folgendes:
Hier kann ich maximal Seite 1 anklicken, wenn ich mit der Maus weiter runtergehe verschwindet das Submenü.
------------------------------------------------------------------------------------------------------------------------------------------
Ich habe echt keine Ahnung warum es auf der einen Seite (1.Bild) normal angezeigt wird und auf der anderen (2.Bild) nicht und hoffe das Ihr mir einen Tipp geben könnt in welche Richtung ich suchen soll.
Hier der CSS-Code vom Menü:
HTML-Code:
.bg {
background: url(images/button4.gif);
}
.menu {
padding:0 0 0 32px;
margin:-5px -3px 0 -3px;
list-style:none;
height:40px;
background:#fff url(images/button1a.gif) repeat-x;
position:relative;
font-family:arial, verdana, sans-serif;
}
.menu li.top {
display:block;
float:left;
position:relative;
}
.menu li a.top_link {
display:block;
float:left;
height:40px;
line-height:33px;
color:#bbb;
text-decoration:none;
font-size:10px;
font-weight:bold;
padding:0 0 0 12px;
cursor:pointer;
}
.menu li a.top_link span {
float:left;
font-weight:bold;
display:block;
padding:0 24px 0 12px;
height:40px;
}
.menu li a.top_link span.down {
float:left;
display:block;
padding:0 24px 0 12px;
height:40px;
background:url(images/down.gif) no-repeat right top;
}
.menu li a.top_link:hover {
color:#000;
background: url(images/button4.gif) no-repeat;
}
.menu li a.top_link:hover span {
background:url(images/button4.gif) no-repeat right top;
}
.menu li a.top_link:hover span.down {
background:url(images/button4a.gif) no-repeat right top;
}
.menu li:hover > a.top_link {
color:#000;
background: url(images/button4.gif) no-repeat;
}
.menu li:hover > a.top_link span {
background:url(images/button4.gif) no-repeat right top;
}
.menu li:hover > a.top_link span.down {
background:url(images/button4a.gif) no-repeat right top;
}
.menu table {
border-collapse:collapse;
width:0;
height:0;
position:absolute;
top:0;
left:0;
}
.menu a:hover {
visibility:visible;
}
.menu li:hover {
position:relative;
z-index:500;
}
.menu ul,
.menu :hover ul ul,
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {
background:#fff;
position:absolute;
left:-9999px;
top:-9999px;
width:0;
height:0;
margin:0;
padding:0;
list-style:none;
z-index: 500;
}
.menu :hover ul.sub {
left:3px;
top:40px;
right:2px;
background: #fff;
padding:3px 0;
border:1px solid #c4c4c4;
/*border-top-color: #181a1c;*/
white-space:nowrap;
width:130px;
height:auto;
}
.menu :hover ul.sub li {
display:block;
height:20px;
background: #fff;
position:relative;
/*float:left;*/
width:auto;
}
.menu :hover ul.sub li a {
padding: 0 4px 0 0;
background: #fff;
font-weight:bold;
display:block;
font-size:10px;
height:20px;
width:auto;
line-height:20px;
text-indent:5px;
color:black;
text-decoration:none;
border:3px solid #fff;
border-width:0 3px 0 3px;
}
.menu :hover ul.sub li a.fly {
background:#fff url(images/arrow.gif) 80px 7px no-repeat;
}
.menu :hover ul.sub li a:hover {
background:#c5c5c5;
color:#000000;
}
.menu :hover ul.sub li a.fly:hover {
background:#999999 url(images/arrow_over.gif) 80px 7px no-repeat;
color:#fff;
}
.menu :hover ul li:hover > a.fly {
background:#999999 url(images/arrow_over.gif) 80px 7px no-repeat;
color:#fff;
}
.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul {
left:90px;
top:-4px;
background: #fff;
padding:3px 0;
border: 1px solid #999999;
white-space:nowrap;
width:93px;
z-index:500;
height:auto;
}
Hier der CSS-Code von der 2.Seite (2.Bild):
HTML-Code:
#wdbcontainer {
width: 1200px;
margin: auto;
height: 750px;
border: 1px solid black;
list-style: none;
position: absolute;
}
#wdbmenue {
width: 200px;
height: 750px;
border-right: 1px solid black;
position: absolute;
overflow: auto;
}
#menuehack {
width: 450px;
height: 727px;
padding: 5px 0 0 5px;
float: left;
}
#wdbinhalt {
width: 983px;
height: 734px;
margin-left: 201px;
border: 3px solid;
border-top-color: grey;
border-right-color: lightgrey;
border-bottom-color: lightgrey;
border-left-color: grey;
padding: 5px;
position: absolute;
}
Hier noch ein Bild zur Verdeutlichung des Fehlers und des CSS-Codes der 2. Seite:
wdbcontainer: Rand für den gesammten Inhalt der Seite
wdbmenue: Linkes Ordnermenü
wdbmenuehack: Damit ich ein Scrollbalken für das Ordnermenü bekomme und auch alle Texte der Ordner vollständig geladen werden und gelesen werden können
wdbinhalt: hier wird der Inhalt angezeigt
-------------------------------------------------------------------------------------------------------------------------------------------
Wie kann ich dafür sorgen das das Submenü in der Z-Achse ganz oben ist?
Mfg. Normal