Add different background for each link in the global navigation menu in SharePoint 2010

I needed a global navigation that has different styles for each of the link in the navigation, for example in the following image:

First I checked out Randy Drisgill’s article – Using simple rendering in SharePoint Navigation. From this article, I learnt that if UseSimpleRendering=”True”  in the <SharePoint:AspMenu> control, the navigation menu uses a cleaner unordered HTML list. If it’s set to False, then the old less clean Table based navigation is used

To make each link have different styles, I did the following:

  1. In the master page, set UseSimpleRendering=”False”
  2. Each of the links will have a id, can use these ids to style the look. Use the Developer’s Tool from IE to find these ids.
  3. In the master page style sheet, I added these code
    /*style of All links in global navigation*/
    a.zz1_TopNavigationMenuV4_1 {color:#000; font-weight:bold; padding:5px 33px 5px 33px;}
    /*Second level whole style*/
    .zz1_TopNavigationMenuV4_0 {margin-top:5px;}
    /*To make each item in the top level having different top border color*/
    #zz1_TopNavigationMenuV4n0{border-top:5px #99CE58 solid;}
    #zz1_TopNavigationMenuV4n0 + td{display:none;}/*remove white space between links*/
    #zz1_TopNavigationMenuV4n0 a:hover{color:#99CE58;}
    #zz1_TopNavigationMenuV4n1{ border-top:5px #599AC6 solid;}
    #zz1_TopNavigationMenuV4n1 img{ display:none}/*remove dropdown arrow when there is dropdown list*/
    #zz1_TopNavigationMenuV4n1 a:hover{color:#599AC6;}
    /*#zz1_TopNavigationMenuV4n1Items{background-color:#fff;}*/
    #zz1_TopNavigationMenuV4n2{ border-top:5px #00BDDD solid;}
    #zz1_TopNavigationMenuV4n2 + td{display:none;}
    #zz1_TopNavigationMenuV4n2 a:hover{color:#00BDDD;}
    #zz1_TopNavigationMenuV4n3{ border-top:5px #AAB383 solid;}
    #zz1_TopNavigationMenuV4n3 img{ display:none}
    #zz1_TopNavigationMenuV4n3 a:hover{color:#AAB383 ;}
    #zz1_TopNavigationMenuV4n3Items{color:#AAB383 ;}
    #zz1_TopNavigationMenuV4n4{ border-top:5px #6DC9CB solid;}
    #zz1_TopNavigationMenuV4n4 + td{display:none;}
    #zz1_TopNavigationMenuV4n4 a:hover{color:#6DC9CB ;}
    #zz1_TopNavigationMenuV4n5{ border-top:5px #3B637E solid;}
    #zz1_TopNavigationMenuV4n5 img{ display:none}
    #zz1_TopNavigationMenuV4n5 a:hover{color:#3B637E ;}
    #zz1_TopNavigationMenuV4n5Items{color:#3B637E ;}
    #zz1_TopNavigationMenuV4n6{ border-top:5px #836252 solid;}
    #zz1_TopNavigationMenuV4n6 img{ display:none}
    #zz1_TopNavigationMenuV4n6 a:hover{color:#836252;}
    #zz1_TopNavigationMenuV4n6Items{color:#836252;}
    #zz1_TopNavigationMenuV4n7{ border-top:5px #AAAAA0 solid;}
    #zz1_TopNavigationMenuV4n7 a:hover{color:#AAAAA0;}
    /*Second level links having different hover state*/
    #zz1_TopNavigationMenuV4n8 {height:20px;}
    #zz1_TopNavigationMenuV4n8 a:hover{color:#599AC6;}
    #zz1_TopNavigationMenuV4n9 {height:20px;}
    #zz1_TopNavigationMenuV4n9 a:hover{color:#599AC6;}
    #zz1_TopNavigationMenuV4n10 {height:20px;}
    #zz1_TopNavigationMenuV4n10 a:hover{color:#599AC6;}
    #zz1_TopNavigationMenuV4n11 {height:20px;}
    #zz1_TopNavigationMenuV4n11 a:hover{color:#AAB383;}
    #zz1_TopNavigationMenuV4n12 {height:20px;}
    #zz1_TopNavigationMenuV4n12 a:hover{color:#3B637E ;}
    #zz1_TopNavigationMenuV4n13 {height:20px;}
    #zz1_TopNavigationMenuV4n13 a:hover{color:#836252;}
    #zz1_TopNavigationMenuV4n14 {height:20px;}
    #zz1_TopNavigationMenuV4n14 a:hover{color:#836252;}

    Note: if there are more then one level in the navigation, the other levels’ code will be after the table of the first level in the source code the the master page.