CODEWITHSUNDEEP
htmlcss
rupasov
rupasov

Reputation: 13

Horizontal navigation menu with different colors when hovered

Is there a simpler solution for this? I want to make all of my nav lists with different background color when it is hovered. Now I make it with id-s. Now the code looks like the following. Updated code can check 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;
}

Upvotes: 1

Views: 3049

Answers (1)

Michael
Michael

Reputation: 7092

You could use the nth-child selector.

Cross compatibility: 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; }

For hover just add the :hover selector : http://jsfiddle.net/2HmUk/1/

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

Could also be:

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

Upvotes: 2

Related Questions