.menusan
{
 /* use these params to positions your menu */
 position: relative;
}
 
.menusan, .menusan li, .menusan li ul { /* all lists */
 padding: 0;
 margin: 0;
 list-style: none;
}
 
.menusan li a {
 display: block;
 font-size: 11px;
 font-weight: bold;
 text-decoration: none;
 font-weight: bold;
 margin: 0 5px;
 line-height: 20px;
 text-align: center;
 padding: 0 4px;
 color: #FFFFFF;
}

.menusan li a:hover {
 text-decoration: none;
 font-weight: bold;
 color: #c88e52;
}

.menusan li.active a{
  background: #FFFFFF;
  color: #c88e52;
}
 
.menusan li { /* all list items */
 display: inline;
 float: left;
}

.menusan li.item1 {
 padding-left: 3px;
}

.menusan li ul { /* second-level lists */
 position: absolute;
 background: #000000;
 width: 9em;
 margin-left: 5px;
 left: -98%; /* using left instead of display to hide menus because display: none isn’t read by screen readers */
}
 
.menusan li ul li{
padding: 3px 2px;
border: 0;
}

ul.menusan li.active ul li a{
 background: #000000;
 color: #FFFFFF;
}

ul.menusan li.active ul li a:hover{
 color: #c88e52;
}
 
.menusan li:hover ul, .menusan li.sfhover ul  { /* lists nested under hovered list items */
 left: auto; /* change is to 10px, 20px, etc for indenting the sub menue */
}