CSS Menu - ganze Balken als Links, nicht nur Text

[Gladiator6]

Hallo

Habe hier ein einfaches CSS Menu. Funktioniert eigentlich ganz gut, nur möchte ich die Links auf die gesamte Breite des Menus (also der Grafik) legen, und nicht nur auf den Text beschränken (bei einem Kurzen Text ist der Menupunkt viel breiter als der Text). Kann mir jemand sagen wie ich das schaffe? Bin leider nach 20 minuten googeln noch nicht fündig geworden.

#navigation ul {
}

#navigation li {
    display: block;
    width: 100%;
    line-height: 32px;
    list-style-type: none;
    font-size: 14px;
    color: white;
    width:150px;
    height:32px;
    margin-left:-20px;
    padding:0px;
    text-indent: 15px;
    border: 0px solid white;
}

#navigation li:hover {
background-image:url(../img/highlight.png);
display: block;
}

<ul>
<li><a href='index.php'>Home</a></li>
<li><a href='site2.php'>Site 2</a></li>
</ul>

 

[hela]

... Kann mir jemand sagen wie ich das schaffe? ...

... indem du das A-Element zum Blockelement machst. Im LI-Element kannst du diese Deklaration weglassen, wie z.B. auch die doppelte WIDTH-Deklaration.

 

[Gladiator6]

Danke für den Tip, es funktioniert.

Gibt es einen Grund dass das im LI Element nicht funktioniert?

 

[hela]

Das LI-Element ist ja nicht der Link sondern das A-Element.

Außerdem ist das LI-Element nativ ein Blockelement.