XHTMLforum - Dropdownmenü

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - Dropdownmenü (http://xhtmlforum.de/showthread.php?t=71166)

Hallo.. ich bräuchte Hilfe bei der Erstellung eines DropDownMenüs für meine Website.

Hier ein Screenshot des Designs(bei einem "hover" ändert sich die Darstellung des Buttons):
http://i.imgur.com/2WjgfAx.jpg

Hier noch mein HTML-Code zu den bisherigen Buttons:

Code:

<div id="buttons">

<div id="button">

<a href="index.html"><div class="button2"><p>Home</p></div></a>

<a href="about.html"><div class="button2"><p>About</p></div></a>

<a href="unwichtig.html"><div class="button2"><p>unwichtig</p></div></a>

<a href="unwichtig.html"><div class="button2"><p>unwichtig</p></div></a>

<a href="unwichtig.html"><div class="button2"><p>unwichtig</p></div></a>

<a href="unwichtig.html"><div class="button2"><p>unwichtig</p></div></a>

</div>

</div>

Und auch der CSS-Code dazu:

Code:

body {

background-color:#24272d;

margin:0px auto;

min-width:960px;

}

#header {

width: 100%;

height: 261px;

margin:0px auto;

text-align:center;

}

#buttons {

width: 100%;

height: 39px;

}

#button {

width: 960px;

margin:0px auto;

text-align:center;

}

.button2 {

float:left;

width:160px;

height:39px;

background:url(img/button_sprites.png) no-repeat;

background-position: 0px 0px;

}

.button2 p {

font-size:20px;

font-family:Cambria;

color:white;

margin:0px;

margin-top:8px;

}

.button2 a {

text-decoration:none;

}

.button2:hover{

background-position: 0px -39px;

cursor:pointer;

}

Wäre jemand so nett, mir damit weiterzuhelfen?
Wie bekomme ich es hin, beim "hovern" auch noch einen dropdown-Effekt zu erzeugen?

Ich bedanke mich schonmal für eure Antworten. Liebe Grüße
z3d

Hallo,
mit Menü hat dein ganzer Code wenig zu tun, und mit einem dropdownmenü noch weniger. Was Du hier hast sind ein paar divs die nebeneinander liegen (durch "float: left") und beim hovern das obere Bild verschwinden lassen (durch "height: 0 -39px").
Ja, die code könnte man benutzen um daraus ein Menu zu gestalten, ist aber wohl eher für einen button gedacht - wie der Name auch sagt. Ich würde anraten den code für ein richtiges Menü zu verwenden, und wenn das das dann noch einen zweiten level haben soll, kommt die dropdown-Funktion zum Vorschein.

Ein Tipp nebenbei:

Der Aufbau deiner Navigation ist nicht sonderlich schön. Du kannst so zwar die gewünschte Optik erzielen, allerdings werden barrierefreie und semantisch korrekte Navigation mit Listen erstellt.

Beispiel:

HTML-Code:

<ul>

   <li><a href="">Home</a></li>

   <li><a href="">About</a></li>

   <li><a href="">Unwichtig</a></li>

   <li><a href="">Unwichtig</a>

      <ul>

         <li><a href="">Unwichtiger Unterpunkt (Dropdown)</a></li>

         <li><a href="">Unwichtiger Unterpunkt (Dropdown)</a></li>

         <li><a href="">Unwichtiger Unterpunkt (Dropdown)</a></li>

      </ul>

   </li>

   <li><a href="">Unwichtig</a></li>

</ul>

Falls du HTML 5 verwendest, baust du noch ein nav-Element um den genannten Code herum.