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![:)](https://www.easy-coding.de/wcf/images/smilies/smile.png)
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
![:)](https://www.easy-coding.de/wcf/images/smilies/smile.png)
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