Hi,
vor einiger Zeit habe ich mir ein Dropdown Menü für meine Homepage zusammengebastelt. Dieses ist jedoch nicht für mobile Geräte geeignet.
Leider schaffe ich es mit meinen bescheidenen Kenntnissen nicht, das ganze wie folgt umzustruktuieren:
Möglichst ohne Java Script
Nur bei einem Klick auf "Menue", erscheinen die drei Unterpunkte.
Nur bei einem erneuen Klick auf "Menue" verschwinden die drei Unterpunkte wieder.
Im Internet habe ich einige Beispiele gefunden. Aber diese sind zu umfangreich und für mich unverständlich. Gibt es nicht einen einfachen Weg für mein Problem?
Danke im voraus für Eure Hilfe :-)
Hier mein Code:
vor einiger Zeit habe ich mir ein Dropdown Menü für meine Homepage zusammengebastelt. Dieses ist jedoch nicht für mobile Geräte geeignet.
Leider schaffe ich es mit meinen bescheidenen Kenntnissen nicht, das ganze wie folgt umzustruktuieren:
Möglichst ohne Java Script
Nur bei einem Klick auf "Menue", erscheinen die drei Unterpunkte.
Nur bei einem erneuen Klick auf "Menue" verschwinden die drei Unterpunkte wieder.
Im Internet habe ich einige Beispiele gefunden. Aber diese sind zu umfangreich und für mich unverständlich. Gibt es nicht einen einfachen Weg für mein Problem?
Danke im voraus für Eure Hilfe :-)
Hier mein Code:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<style>
.dropbtn
{
color: #000000;
font-size:1em;
text-decoration:none;
cursor:pointer;
}
.dropdown
{
position: relative;
display: inline-block;
font-size:1.25em;
}
.dropdown-content
{
display: none;
position: absolute;
min-width: 100px;
z-index: 1;
white-space: nowrap;
}
.dropdown-content a
{
color: #000000;
background-color: #c0c0c0;
padding: 12px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {color: #000000; text-decoration:none;}
</style>
<div class="dropdown">
<div class="dropbtn">Menue</div>
<div class="dropdown-content">
<a href="1.htm">Punkt 1</a>
<a href="2.htm">Punkt 2</a>
<a href="3.htm">Punkt 3</a>
</div>
</div>
