#nav {
		position: relative;
		top: 3px;
		height: 40px;
		width: 500px;
	}
	
	#nav li {
    float: left;
  }

/*root menu item - inactive*/
  #nav li a:visited, #nav li a:link {
    padding: 0px 10px 0px 10px;
    background: black; 
    text-decoration: none;
    color: #fff;
    line-height: 20px;
    display: block;
  }

/*root menu item - active*/
  #nav li a:hover, #nav li a:active, #nav li.on a.top {
    background: red;  
    text-decoration: underline;
    color: #000;
  }
  
/*submenu block - if parent menu inactive and not hovered*/  
  #nav li ul {
    margin: 0 auto;
    position: absolute;
    display: none;
    left: 0;
    top: 20px;
		width: 500px; /*if you change it, dont forget to change the #nav tag too*/
		background: magenta; /*this background overlaps the longer submenu group if shorter submenu group appears*/
  }
  
/*submenu block - if parent menu hovered*/
  #nav li:hover ul, #nav li.over ul {
    position: absolute;
    display: block;
    z-index: 600;
  }

/*submenu block - if parent menu selected*/  
  #nav li.on ul {
    display: block;
  }
  
/*submenu item - inactive*/
  #nav li ul li a:visited, #nav li ul li a:link {
    padding: 0px 10px 0px 10px;
    background: blue;
    text-decoration: none;
    color: #fff;
    line-height: 20px;
  }

/*submenu item - active*/
  #nav li ul li a:active, #nav li ul li a:hover, #nav li.on ul li.on a {
    background: green;
    text-decoration: underline;
    color: #000;
  }