Muckie: Liste als Menü

Hallo zusammen,
ich möchte mir gerne ein kleines Menü basteln.
Ich habe folgenden Ansatz:

<ul>
  <li class="menu">Link1</li>
  <li class="menu">Link2</li>
</ul>

Das eigentlich Problem ist folgendes:

In der CSS Datei steht:

.menu a:hover {
    background-color: #d0d0d0;
}

Wenn ich jetzt mit der Maus über den Link fahre, ist der Hintergrund des Links farbig. Ich möchte aber nicht nur den Hintergrund direkt hinter dem Text in der Farbe haben, sondern die gesamte Breite. Man soll auch nicht nur direkt auf den Linktext klicken können, um den Link zu öffnen, sodern irgendwo in der "Zelle". (Ich hoffe das ist einigermaßen verständlich ausgedrückt). Kann mir jemand einen Tipp geben, wie man sowas macht?

  1. hi,

    Wenn ich jetzt mit der Maus über den Link fahre, ist der Hintergrund des Links farbig. Ich möchte aber nicht nur den Hintergrund direkt hinter dem Text in der Farbe haben, sondern die gesamte Breite. Man soll auch nicht nur direkt auf den Linktext klicken können, um den Link zu öffnen, sodern irgendwo in der "Zelle".

    display:block für den Link.

    Ältere IE verlangen auch noch eine width-Angabe.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. display:block für den Link.

      Vielen Dank erstmal dafür. Jetzt noch ein Problem leider:

      Ich habe folgende Angabe in der CSS Datei:

      ul{
       list-style: none;
       margin:0px;
       padding:0px;
      }

      Jetzt habe ich eine kleine Grafik vor jedem Link eingefügt. Durch das

      display:block;

      ist jetzt die Grafik in einer Zeile und darunter der Link. Es ist also nicht mehr nebeneinander. Gibts da auch eine so simple Lösung?

      1. Hallo!

        ist jetzt die Grafik in einer Zeile und darunter der Link. Es ist also nicht mehr nebeneinander. Gibts da auch eine so simple Lösung?

        Du musst die Grafik aus dem Elementfluss nehmen. Entweder mit float (dann der Grafik auch ein display:block geben) oder mit position:absolute.

        ciao, ww

        --
        Ein japanisch-deutsches Gedicht
        sh:(  fo:|  ch:~  rl:(  br:>  n4:~  ie:%  mo:)  va:)  de:]  zu:)  fl:(  ss:|  ls:~  js:)
        1. Vielen Dank für eure Hilfe. Funktioniert jetzt alles wunderbar.

  2. Hallo,
    du musst das Link-Element zum Block-Element machen. Danach kannst du ihm eine breite angeben.

    Tschau

    Tobias

    --
    Speedswimming? Finswimming? Flossenschwimmen?|http://www.tobiasklare.de |  Mein Wunschzettel
    fo:) ch:? rl:( br:^ n4:° ie:{ mo:) va:| fl:) ss:| ls:<
    Die Erklärung zum Selfcode findest du hier: http://emmanuel.dammerer.at/selfcode.html
    Einen Decoder für den Selfcode findest du hier: http://peter.in-berlin.de/projekte/selfcode