Wie versprochen, dass Pull-Down-Menu nur mit Listen und CSS.
Vergleicht bitte die obrige Lösung(Javascript und CSS) mit dieser und sagt mir, welches besser bzw. benutzerfreundlicher ist.
Für ein Feedback wäre ich sehr dankbar
Alles anzeigen
Gruß Daniel
Vergleicht bitte die obrige Lösung(Javascript und CSS) mit dieser und sagt mir, welches besser bzw. benutzerfreundlicher ist.
Für ein Feedback wäre ich sehr dankbar
Quellcode
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
- "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:language="en">
- <head>
- <title>Pull-Down-Menu</title>
- <style type="text/css">
- * {
- margin: 0px;
- padding: 0;
- }
- #Menu {
- position:absolute;
- top: 10px;
- left: 10px;
- width: 100%;
- padding: 0 20px;
- background: #003366;
- float: left;
- }
- #Menu li {
- position: relativ;
- }
- #Menu ul {
- color: #000;
- background: #ff9224;
- border: 1px solid;
- width: 140px;
- float: left;
- list-style: none;
- text-align: center;
- }
- #Menu ul ul {
- position: absolute;
- z-index: 2;
- display: none;
- }
- #Menu a {
- text-decoration: none;
- text-align: center;
- border: 1px solid #ccc;
- color: #003366;
- background: #ff9224;
- display: block;
- }
- #Menu a:hover {
- color: #ff9224;
- background: #003366;
- }
- #Menu ul li:hover ul {
- display: block;
- }
- </style>
- </head>
- <body>
- <div id="Menu">
- <ul>
- <li>Startseite
- <ul>
- <li><a href="#">News</a></li>
- <li><a href="#">Downloads</a></li>
- <li><a href="#">Links</a></li>
- </ul>
- </li>
- </ul>
- <ul>
- <li>Herrenabteilung
- <ul>
- <li><a href="#">1.Abteilung</a></li>
- <li><a href="#">2.Abteilung</a></li>
- <li><a href="#">3.Abteilung</a></li>
- </ul>
- </li>
- </ul>
- </div>
- <div style="clear:both;"></div>
- </body>
- </html>
Gruß Daniel