Nth-child colourfull navigation issue

[Attila Hajzer]

Im having a problem with creating a css navigation where when hovered or active state of a navigation item is selected is only showing up as the first colour. I previously had ID’s to the menu items but then i realized i can just as easily do nth-child. but clearly for me . not just as easy. i want to do Nth-child because it reduces a lot of code bloat and its easier to read the html for me.

here’s the link: http://jsfiddle.net/attilahajzer/DQZPB/

[ylc66]

hello attilahajzer !

maybe you could try something like :

/* here : same as yours */
nav{ background-color:#CCCCCC; height:35px; }
nav ul{list-style-type:none; height:35px;border-bottom: 3px solid #CCC}
nav ul li { padding: 0; margin: 0; line-height:35px; float:left;}

nav ul li a{padding-left:22px; padding-right:22px; margin:0; display:block; color:#333; line-height:35px; border-bottom: 3px solid #CCC}
nav ul li a:hover{background-color:#eee; color:#333333;}

/* here : some changes */
nav ul li:nth-child(1):hover, nav ul li:nth-child(1).active{border-bottom: 3px solid #FF0000; background-color:#EEEEEE;}
nav ul li:nth-child(2):hover, nav ul li:nth-child(2).active{border-bottom: 3px solid #FF8800; background-color:#EEEEEE;}
nav ul li:nth-child(3):hover, nav ul li:nth-child(3).active{border-bottom: 3px solid #FFF700; background-color:#EEEEEE;}
nav ul li:nth-child(4):hover, nav ul li:nth-child(4).active{border-bottom: 3px solid #249C3A; background-color:#EEEEEE;}
nav ul li:nth-child(5):hover, nav ul li:nth-child(5).active{border-bottom: 3px solid #1C96E8; background-color:#EEEEEE;}
nav ul li:nth-child(6):hover, nav ul li:nth-child(6).active{border-bottom: 3px solid #983A9C; background-color:#EEEEEE;}
;}

i just suggest you change colors / background-colors for the li, and note the “a” .

(but i think it does’nt work with IE7)

good luck !

youn

[ylc66]

glad it helped :)

[Author]

Posts