Dropdown Menu Vertikal

[Intersect]

Hallo.

Hab ein Vertikales Dropdown Menu geschrieben, mein erstes. Es funktionert alles ziehmlich gut, bis auf ein kleines Problem.
Sobald auf eine Menupunkt geklickt wird, soll sich alles nach unter verschieben und die Menupunkte erscheinen.

Bei mir verschiebt sich nichts nach unten, sondern überlappt das nicht mehr zu erkennen ist.
Hilft mir bitte.

<div id="navMenu" class="Dropdown">
<ul>
        <li><a href="#">Test</a>
<ul>
        <li><a href="test1.html">test1</a></li>
        <li><a href="test1.html" target="_blank">test1</a></li>
        <li><a href="test1.html">test1</a></li>
        <li><a href="test1.html" target="_blank">test1</a></li>
</ul>
</li>
        <li><a href="#">Test2</a>

<ul>
        <li><a href="test3.html">test3</a></li>
        <li><a href="test3.html">test3</a></li>
</ul>
</li>
        <li><a href="#">Test4</a>

<ul>
        <li><a href="test5.html">test5</a></li>
        <li><a href="test5.html">test5 </a></li>
</ul>
</li>

</ul>

</div>

.Dropdown 
    {
    float: left;
    margin-right: 100px;
    background-color: white;
}

#navMenu, ul, li,  li li 
    {
    top: 50px;
    right: 150px;
    background-color: ;    
}

#navMenu 
    {
    width:150px;
    height:30px;
}

#navMenu ul 
    {
    line-height: 150%;
}

#navMenu li
    {
    list-style:none;
    position:relative;
}

#navMenu li li
    {
    list-style:none;
    position:relative;
    left:150px;
    top:-30px;
}

#navMenu ul li a 
    {
    width: 150px;
    height:30px;
    display: block;
    text-decoration:none;
    text-align: center;
    font-family: Verdana, "Times New Roman", Times, sans-serif;
}

#navMenu ul ul 
    {
    position: absolute;
    visibility: hidden;
    top: 30px;
}

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

Vielen dank für eure Aufmerksamkeit.

 

[threadi]

Wenn Du durch Klick auf einen Menüpunkt etwas anpassen willst, wäre JavaScript (derzeit noch oft) die bessere Lösung. Wenn Du es per CSS lösen willst, schau dir mal die Pseudoklassen :active; :focus und :target an (letztere wird nur von wenigen Browsern unterstützt). Ich würde dir zu JavaScript raten.

Die Überlappung liegt übrigens an der absoluten Positionierung in "#navMenu ul ul".