nicht angemeldet
Bitte um hilfe bei einem CSS Dropdown Menü
Hallo,
ich habe ein Problem mit einem CSS Drop Down Menü,
es zeigt sich einfach nicht richtig an.
Die Ebenen die sich öffnen wenn man mit der Maus über ein Menüpunkt geht, sind nicht anklikbar. sie werden aber angezeigt.
Vlt, liegt was darüber? ich weiss es nicht.
Die ausrichtung der "boxen" passen nicht, unter IE werden sie richtig angezeigt, under Firefoxx nicht, dort liegen sie nicht am oberen rand der übergeortneten Div box sondern unter dem Unteren.
Mir ist schon klar das das sehr viel code ist, aber ich denke ohne ihn zu kennen kann man nicht helfen.
Besten Dank für Jede Hilfe.
Hier die Cods:
HTML:
<div id="klickpfad"><a href="index.php?id=13" onfocus="blurLink(this);" >Kooperationen</a> </div>
<div id="navi2"> <ul class="navi2"><li onmouseover="show(this)" onmouseout="hide(this)"><a href="index.php?id=20" onfocus="blurLink(this);" >Berufe</a><ul class="navi2"><li onmouseover="show(this)" onmouseout="hide(this)"><a href="index.php?id=27" onfocus="blurLink(this);" >Beruf A</a></li></ul></li><li onmouseover="show(this)" onmouseout="hide(this)"><a href="index.php?id=19" onfocus="blurLink(this);" >Teilzeitberufsschule</a><ul class="navi2"><li onmouseover="show(this)" onmouseout="hide(this)"><a href="index.php?id=28" onfocus="blurLink(this);" >Teilzeit 1</a></li><li onmouseover="show(this)" onmouseout="hide(this)"><a href="index.php?id=29" onfocus="blurLink(this);" >Teilzeit 2</a></li></ul></li><li onmouseover="show(this)" onmouseout="hide(this)"><a href="index.php?id=18" onfocus="blurLink(this);" >Berufsgrundbildungsjahr</a><ul class="navi2"><li onmouseover="show(this)" onmouseout="hide(this)"><a href="index.php?id=30" onfocus="blurLink(this);" >BGJ1</a></li><li onmouseover="show(this)" onmouseout="hide(this)"><a href="index.php?id=31" onfocus="blurLink(this);" >BGJ2</a></li></ul></li><li onmouseover="show(this)" onmouseout="hide(this)"><a href="index.php?id=17" onfocus="blurLink(this);" >Berufsfachschule</a></li><li onmouseover="show(this)" onmouseout="hide(this)"><a href="index.php?id=16" onfocus="blurLink(this);" >Equal</a></li><li onmouseover="show(this)" onmouseout="hide(this)"><a href="index.php?id=15" onfocus="blurLink(this);" >Projekte</a></li></ul
</div>
<!-- dann geht es weiter mit dem normalem Quelltext-->
<div id="consens">...
Dazu der CSS Code:
/*in der box navi2 steht das menü, darunter befindet sich die box klickpfad. es muss irgentwie klikpfad überlagern.*/
#navi2 { overflow:visible;
letter-spacing: 1px;
background-image: url(images/navi.gif);
height: 29px;
width: 638px;
left: 0;
top: 105px;
position:
absolute;
visibility:
visible; }
/*Devinition links */
#navi2 a {overflow:visible;
letter-spacing: 1px;
color: #FFFFFF;
font-size: 11px;
text-decoration: none; }
/*und zum schluss die Listen definitionen*/
ul.navi2, ul.navi2 ul {
list-style-type: none;
}
ul.navi2 a {
display: block;
padding: 0px 0px 0px 10px;
font-weight: normal;
}
ul.navi2 li {
padding: 0;
margin: 0;
float: left;
background-color: #3d6376;
border:0px solid #26383D;
height: 20px;
}
/* Für Unterpunkte keine Float-Eigenschaft
hintergrundfarbe des Pulldowns none*/
ul.navi2 ul li {
float:none;
font color
background-color: #d2d5e1;
}
/* Links auf Unterpunkten sollen die Hintergrundfarbe ändern */
ul.navi2 ul li.hover, ul.navi2 ul li:hover {
background-color: #FFF9E4;
}
/* Zweite Ebene */
ul.navi2 ul {
margin:0;
padding: 0;
position: absolute;
background-color: #26383D;
border: 1px solid #FFF9E4;
display: none;
width: 180px;
}
/* Zweite Ebene anzeigen */
ul.navi2 li.hover ul, ul.navi2 li:hover ul {
display: block;
}
/* Dritte Ebene */
ul.navi2 li.hover ul ul, ul.navi2 li:hover ul ul {
display: none;
margin-left: 160px; /* Breite eines Listenelements - Überlagerung */
margin-top: -20px; /* Höhe eines Listenelements */
}
/* Dritte Ebene anzeigen */
ul.navi2 li.hover ul li.hover ul, ul.navi2 li:hover ul li:hover ul {
display: block;
}
/* Vierte Ebene */
ul.navi2 li.hover ul li.hover ul ul, ul.navi2 li:hover ul li:hover ul ul {
display: none;
}
/* Vierte Ebene anzeigen */
ul.navi2 li.hover ul li.hover ul li.hover ul , ul.navi2 li:hover ul li:hover ul li:hover ul {
display: block;
}
Das JS:
<script type="text/javascript">
//<![CDATA[
function show(element){
element.className += "hover";
}
function hide(element){
element.className = element.className = "";
}
//]]>
-
Die Ebenen die sich öffnen wenn man mit der Maus über ein Menüpunkt geht, sind nicht anklikbar. sie werden aber angezeigt.
Die ausrichtung der "boxen" passen nicht, unter IE werden sie richtig angezeigt, under Firefox nicht
Dann ist dein CSS-Code falsch. Verwende Firefox oder Opera als Referenz und ziehe den IE hinterher, nicht umgekehrt. Beim IE 6 ist davon abgesehen sowieso Hopfen und Malz verloren, wenn du vernünftig mit CSS arbeiten möchtest, konzentriere dich auf den IE 7.
Mir ist schon klar das das sehr viel code ist, aber ich denke ohne ihn zu kennen kann man nicht helfen.
Es ist schön, dass du an den Code gedacht hast, aber bei sowas Umfangreichen wäre die betreffende Seite selbst wäre noch wesentlich hilfreicher, denn dann wäre mittels Firebug das Problem schnell einzukreisen.
Da mir das nun nicht möglich ist, wage ich einfach mal einen Schuss ins Blaue und sage, dass die Ursache der Nichtanklickbarkeit bei diesem negativen Außenrand liegt:
ul.navi2 li.hover ul ul, ul.navi2 li:hover ul ul {
margin-top: -20px; /* Höhe eines Listenelements */Mir ist so, als wenn ich da selbst mal drüber gestolpert wäre. Kann mich aber auch irren.