Горизонтальное меню навигации с разными цветами при наведении

Question

Есть ли более простое решение для этого? Я хочу сделать все мои навигационные списки с другим цветом фона, когда он завис. Теперь я делаю это с id-s. Теперь код выглядит следующим образом. Обновленный код может проверить http://kontaktfotovideo.hu.

<nav> 
    <ul> 
    <li><a id="darkcyan" href="#">Link</a></li> 
    <li><a id="darkgray" href="#">Link</a></li> 
    <li><a id="skyblue" href="#">Link</a></li> 
    <li><a id="coral" href="#">Link</a></li> 
    <li><a id="sandybrown" href="#">Link</a></li> 
    <li><a id="crimson" href="#">Link</a></li> 
    </ul> 
</nav> 

div#navbar { 
    background-color: #787878; 
} 

div#navbar ul { 
    list-style: none; 
} 

div#navbar ul li { 
    float: left; 
    width: 16.666666%; 
} 

div#navbar a:link,div#navbar a:visited { 
    text-decoration: none; 
    color: #FFFFFF; 
    display: block; 
    padding: 0; 
    padding: 5px 95px 20px 5px; 
    border-right: 1px solid #f2f2f2; 
} 

#darkcyan:hover, #darkcyan:active { 
    background-color: #00a78d; 
} 

#darkgray:hover, #darkgray:active { 
    background-color: #b995c5; 
} 

#skyblue:hover, #skyblue:active { 
    background-color: #7db6d3; 
} 

#coral:hover, #coral:active { 
    background-color: #f68e51; 
} 

#sandybrown:hover, #sandybrown:active { 
    background-color: #f9d855; 
} 

div#navbar #crimson:link, div#navbar #crimson:visited { 
    border-right: #787878; 
} 

#crimson:hover, #crimson:active { 
    background-color: #db343b; 
} 

Answer 1

Вы можете использовать селектор nth-child.

Cross Совместимость: http://caniuse.com/#feat=css-sel3

JSFiddle: http://jsfiddle.net/2HmUk/

CSS:

nav ul li:nth-child(1) a { color: orange; } 
nav ul li:nth-child(2) a { color: red; } 
nav ul li:nth-child(3) a { color: green; } 
nav ul li:nth-child(4) a { color: brown; } 
nav ul li:nth-child(5) a { color: yellow; } 
nav ul li:nth-child(6) a { color: purple; } 

Для висения просто добавьте :hover селектор: http://jsfiddle.net/2HmUk/1/

nav ul li:nth-child(1) a:hover { color: orange; } 

Также может быть:

nav ul li:nth-child(1):hover a { color: orange; }