Erstellen Sie ein Dropdown-Menü, in dem der Benutzer eine Option aus einer Liste auswählen kann.
Unten wird eine Dropdown-Box generiert, die angezeigt wird, wenn der Benutzer die Maus über ein Element bewegt.
| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| .dropdownbutton { |
| background-color: dodgerblue; |
| color: black; |
| padding: 16px; |
| font-size: 16px; |
| border: none; |
| cursor: pointer; |
| border-radius: 4px; |
| } |
| .dropdown { |
| position: relative; |
| display: inline-block; |
| } |
| .dropdown-Inhalt { |
| display: none; |
| position: absolute; |
| background-color: grey; |
| min-width: 160px; |
| box-shadow: 16px 8px 16px 0px orange; |
| z-index: 1; |
| } |
| .dropdown-Inhalt a { |
| color: black; |
| padding: 12px 16px; |
| text-decoration: none; |
| display: block; |
| } |
| .dropdown-Inhalt a:hover {background-color: silver} |
| .dropdown:hover .dropdown-Inhalt { |
| display: block; |
| } |
| .dropdown:hover .dropdownbutton { |
| background-color: black ; |
| color: orange; |
| } |
| </style> |
| </head> |
| <body> |
| <h4>Dropdown-Menu</h4> |
| <div class="dropdown"> |
| <button class="dropdownbutton">strassencoder.ch</button> |
| <div class="dropdown-Inhalt"> |
| <a href="index.htm">Home</a> |
| <a href="einführung.htm">Einführung</a> |
| <a href="editor.htm">Editor</a> |
| </div> |
| </div> |
| </body> |
| </html> |
