Grow your CSS skills. Land your dream job.

Nth-child colourfull navigation issue

  • # May 10, 2012 at 12:32 pm

    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/

    # May 10, 2012 at 1:10 pm

    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

    # May 10, 2012 at 2:15 pm

    It works ! thank you so much!

    # May 10, 2012 at 6:00 pm

    glad it helped :)

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".