nicht angemeldet
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 = "";
}
//]]>