Navigation über <ul> und <li>

[Simi]

Hi all,

Hoffe ihr versteht was ich meine...ich habe einen Blackout und wäre froh, wenn ihr mir auf die Sprünge helfen könnt.

Mein Div in dem sich die Navigation befindet ist 160px breit. Soweit gut...ich möchte nun meine Navigation auch so breit haben. Das heisst, dass der Hover automatisch auch so breit sein muss. Ich wollte das so lösen:

Hier mein Div:
CODE
<div>
<ul id="navigation">
<li><a href="test">Test</a></li>
<li><a href="test1">Test1</a></li>
<li><a href="test2">Test2</a></li>
<li><a href="test3">Test3</a></li>
</ul>
</div>



Und hier meine CSS Formatierung:

CODE
ul#navigation {
margin: 0;
border: 1px solid #000000;
}

ul#navigation li {
border: 1px solid gray;
background-color: #FF0000;
}

ul#navigation a {
text-decoration: none;
color: #FFFFFF;
}
ul#navigation a:hover {
color: #FFFFFF;
background-color: #808080;
}



Wer kann mir erklären wie ich das ganze formatieren müsste?

Vielen Dank im Voraus für eure Antworten.

Gruss
Simi

 

[Köbi Fischer]

Hi Simi

Versuchs mal so:
CODE
ul#navigation a {
display: block;
width: 160px;
text-decoration: none;
color: #FFFFFF;
}



Müsste eigentlich funktionieren

Gruss
Köbi

 

[Duvi]

versuch mal:

CODE
ul#navigation {
margin: 0;
border: 1px solid #000000;

list-style-type:none;
padding:0;
width:160px; /* ! */
}

ul#navigation li {
border: 1px solid gray;
background-color: #FF0000;
}

ul#navigation li a {
text-decoration: none;
color: #FFFFFF;

display:block; /* ! */
}

ul#navigation li a:hover {
color: #FFFFFF;
background-color: #808080;
}

 

[Simi]

Hallo Duvi,

Deine Antwort passt!

Vielen Dank euch allen.

Gruss
Simi