Dropdown mit css und js

[ItsNeko]

Hey leute,
ich bastel gerade an einer dropdown Navigation für meine Hompage,
allerdings habe ich die atm nur lokal.
Soweit funktionier auch alles, nur das problem ist, das das dropdown quasi hinter dem text landet.


hier der HTMLteil

<div id="dropcounter1" class="lvl1" onmouseover="dropdown('counter1')" onmouseout="dropup('counter1')"><h3>Navigation</h3><div id="downcounter1" style="visibility:hidden;">
<div class="lvl2"><a href="index.php?Page=home" >Home</a></div>
<div class="lvl2"><a href="index.php?Page=news" >News</a></div>
<div class="lvl2"><a href="index.php?Page=about" >About</a></div>
<div class="lvl2"><a href="index.php?Page=links" >Links</a></div>
<div class="lvl2"><a href="index.php?Page=stats" >Statistik</a></div>
<div class="lvl2"><a href="index.php?Page=justforfun" >Just for Fun</a></div>
<div class="lvl2"><a href="index.php?Page=userliste" >Userliste</a></div>
<div class="lvl2"><a href="index.php?Page=Date" >Kalender</a></div>
</div></div>

<div id="dropcounter2" class="lvl1" onmouseover="dropdown('counter2')" onmouseout="dropup('counter2')"><h3>Projekte</h3><div id="downcounter2" style="visibility:hidden;">
<div class="lvl2"><a href="index.php?Page=Sudoku" >Sudoku</a></div>
<div class="lvl2"><a href="index.php?Page=p_homepage" >Homepages</a></div>
<div class="lvl2"><a href="index.php?Page=p_wp" >Wallpaper</a></div>
<div class="lvl2"><a href="index.php?Page=p_scripts" >Scripts</a></div>
<div class="lvl2"><a href="index.php?Page=p_games" >Games</a></div>
</div></div>

<div id="dropcounter3" class="lvl1" onmouseover="dropdown('counter3')" onmouseout="dropup('counter3')"><h3>Tutorials</h3><div id="downcounter3" style="visibility:hidden;">
<div class="lvl2"><a href="index.php?Page=Tutorials&id=1" >PHP</a></div>
<div class="lvl2"><a href="index.php?Page=Tutorials&id=2" >JavaScript</a></div>
<div class="lvl2"><a href="index.php?Page=Tutorials&id=3" >ToDo</a></div>
</div></div>

<div id="dropcounter4" class="lvl1" onmouseover="dropdown('counter4')" onmouseout="dropup('counter4')"><h3>Interaktiv</h3><div id="downcounter4" style="visibility:hidden;">
<div class="lvl2"><a href="index.php?Page=forum" >Forum</a></div>
<div class="lvl2"><a href="index.php?Page=gb" >Guestbook</a></div>
<div class="lvl2"><a href="index.php?Page=kontakt" >Kontakt</a></div>
<div class="lvl2"><a href="index.php?Page=partner" >Partners</a></div>
</div></div>

hier css

#navigation h3{
    margin-top:0px;
    margin-bottom:10px;
    padding:3px;
}

#navigation .lvl1{
    width:150px;
    float:left; 
    text-align:center;
    background-image:none;
    background-repeat:no-repeat;
    background-position:0px 25px;
    padding-bottom:10px;
    height:20px;
    z-index:100;
}
#navigation .lvl2{
    padding-top:2px;
    height:24px;
    width:149px;
    background-image:url(/templates/prototype/images/navigation_dropdown_part.png);
    background-repeat:no-repeat;
    background-position:2px 0px;
    background-color:#252525;
    color:white;
    z-index:200;

}
#navigation .lvl2 a{
    color:white;
    text-decoration:none;
    height:24px;
    width:149px;
    display:block;
}
#navigation .lvl2:hover{
    height:24px;
    background-image:url(/templates/prototype/images/navigation_dropdown_part_hover.png);
    background-repeat:no-repeat;
    background-position:2px 0px;
}

Hat jemand vielleicht eine Idee woran das liegen kann?
bzw. was ich dagegen machen kann?

 

[KyaraLulu]

AW: Dropdown mit css und js

Hi,

was willst du denn mit den zwei unterschiedlichen z-index Werten erreichen?
Hast du mal probiert den Elementen, denen du ein z-index zugewiesen hast auch eine "position:" zuzuweisen?

Andere Möglichkeit, gib dem Contentbereich auch mal einen z-index.

 

[sokie]

AW: Dropdown mit css und js

Wenn du uns noch schreibst, was das javascript macht, können wir die Kristallkugel wieder in den Schrank stellen.

 

[ItsNeko]

AW: Dropdown mit css und js

function dropdown(drop){
    document.getElementById('drop'+drop).style.backgroundImage = "url(/templates/prototype/images/navigation_dropdown.png)";
    document.getElementById('drop'+drop).style.height = "auto";
    document.getElementById('down'+drop).style.visibility = "visible";
}
function dropup(drop){
    document.getElementById('drop'+drop).style.backgroundImage = "none";
    document.getElementById('drop'+drop).style.height = "20px";
    document.getElementById('down'+drop).style.visibility = "hidden";
}

mehr tut js nicht.
Der Contentbereich hat auch ein z-index von 3.

und was soll position bringen? positioniert ist alles

 

[chacki]

AW: Dropdown mit css und js

position:relative;

 

[KyaraLulu]

AW: Dropdown mit css und js

und was soll position bringen? positioniert ist alles

Weil meines Wissens nach der z-index ohne position keine Auswirkung hat...

 

[ItsNeko]

AW: Dropdown mit css und js

hey sry etwas spät, aber jo hat funktioniert.
Danke euch