css dropdownmenü ohne verlinkung

[potofski]

Hey,

ich habe mir ein dropdown menü gebastelt. Hier der HTML Code.

        <ul id="navi2">
            <li><a href="#">sub1</a>
                <ul>
                    <li><a href="#">subsub1</a></li>
                    <li><a href="#">subsub2</a></li>
                </ul>
            </li>
            <li><a href="#">sub2</a></li>
            <li><a href="#">sub3</a></li>
            <li><a href="#">sub4</a></li>
            <li><a href="#">sub5</a></li>
        </ul>

und hier der relevante css anteil

#navi2 ul{
    height: 0;
    overflow: hidden;
}    

#navi2 li a:focus + ul  {
    height: auto;
    margin-left: 20px;
}

Ich setze die Höhe als erst auf 0 und bei focus auf auto. Das klappt auch wunderbar, nur ein problem tritt auf:

Da ich den Eltermenüpunkt als link setzen muss, um :focus anwenden zu können und ich href mit # besetzt habe, springt der browser bei jedem aufklappen zurück zum seitenanfang. Da ich mein menü etwas weiter unten platzieren muss, ist das wirklich ätzend. Gibt es irgendeine möglichkeit das zu umgehen?

Eigentlich müsste ich doch statt eines links auch einfach ein span verwönden können? das will aber nicht!


...vielen dank

 

[threadi]

<a href="javascript:void(0);">Text</a>