Css Inline menu werkt niet, hoe op te lossen?
Ik heb een menu gemaakt in css, deze vind ik best netjes, maar de tekst wordt als 1 blok weergegeven. Nu is het mijn bedoeling om er een hover aan toe te voegen, maar wanneer ik dat nu doe wordt alle tekst dus, bijvoorbeeld, rood. Wat ik wil is dat, home: groen, contact: blauw wordt, bij de hover - dit enkel als voorbeeld, deze kleuren wil ik niet gebruiken.
Wat klopt er niet aan deze code? Wat kan ik beter anders neerzetten? En wat moet erbij, zodat het wordt zoals ik wil?
Het valt te vergelijken met het menu van: http://webtraders.nl/ (2de afbeelding hier)
Bovenste afbeelding is mijn hover, dus alles rood. De onderste is zoals ik het hebben wil.
#navBar{
display: block;
position: relative;
z-index: 10px;
height: 45px;
color: white;
background: #00c9fc;
-moz-user-select: none;
-khtml-user-select: none;
-o-user-select:none;
unselectable: on;
background: #0078c9;
}
#navBar ul{
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
list-style-type:none;
margin:0;
padding:0;
float: right;
margin-right: 250px;
margin-top: 10px;
word-spacing:15px;
}
#navBar li{
display:inline;
}
#navBar ul:hover{
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
list-style-type:none;
margin:0;
padding:0;
float: right;
margin-right: 250px;
margin-top: 10px;
word-spacing:15px;
color: red;
}