/* remove the list style */
    #nav {
      margin:0;
	  list-style:none;
	  display: block;
      padding: 100px 30px 0 0;
      text-align: right;
      height: 20px;
      float: right;
      white-space: nowrap;
      z-index: 3020;
    }

    /* make the LI display inline */
    /* it's position relative so that position absolute */
    /* can be used in submenu */
    #nav li {
      float:left;
      background: url(../images/home/H1_Arrow.jpg) no-repeat 0px 2px;      
      width: auto;
	  padding: 0px 20px 0 10px;
      position:relative;
      margin:0 1px;
      z-index: 3022;
    }

    /* this is the parent menu */
    #nav li a {
      display:block;
      padding:2px 5px 0 5px;
      color: #999999;
      font-family: Arial;
      font-size: 12px;
      font-weight: bold;
      text-align:center;
      text-decoration: none;
    }

    #nav li a:hover {
      color:#FFFFFF;
    }

    /* you can make a different style for default selected value */
    #nav a.selected {
      color:#FFFFFF;
    }

    /* submenu, it's hidden by default */
    #nav ul {
      position:absolute;
      left:0;
      display:none;
      margin:0px 0px 0px -1px;
      padding:0;
	  list-style:none;      
      background: #CECECE;
      border: solid 1px #1E1F24;
      padding: 5px 10px 5px 10px;
      white-space:nowrap;
      width: auto;
      z-index: 3020;
    }


    #nav ul li {
      float:left;
      width: auto;
	  background: none;
      z-index: 3020;
    }

    /* display block will make the link fill the whole area of LI */
    #nav ul a {
      display:block;
      height:15px;
      padding: 3px 5px;
      color: #333333;
      font-family: Arial;
      font-size: 12px;
      text-decoration: none;
      font-weight: normal;
    }

    #nav ul a:hover {
      text-decoration:none;
      color: #FFFFFF;
    }

    /* fix ie6 small issue */
    /* we should always avoid using hack like this */
    /* should put it into separate file : ) */
    *html #nav ul {
      margin:0 0 0 -2px;
    }