.Menu {
font-family: Arial, sans-serif;
border-bottom: 0px solid black;
font-size: 11px;
text-align: right; /* We are using text-align: left on ul to left align our menu to the page. If you want the menu aligned centered or right just change text-align to either center or right */
margin: 5px 0 5px 10px !important;
padding: 8px 0 3px 0;
}
.Menu li {
margin: 0 2px 0 0 !important;
border-bottom: none;
display: inline; /* Menu links are horizontally aligned using display: inline */
}
.Menu li a {
margin: 0 -2px 0 0;
padding: 3px 7px 3px 7px; /* Display: block won't work in this example, instead we are using padding */
color: white;
text-decoration: none;
border: 0px solid black;
background: black;
}
.Menu li a:hover {
background: #BE9227;
color: #000;
}
.Menu li#active {
margin: 0 3px 0 0 !important;
padding: 3px 6px 3px 8px; /* Display: block won't work in this example, instead we are using padding */
background: #EFB52A;
color: black;
border: 1px solid #EFB52A;
}
.Menu .subMenu {
float: left;
text-align: right; /* If both menus are going to be left-aligned we really don't need to use text-align: left on the sub menu, since this menu will get the alignment from "mother" settings */
width: 100%;
margin: 6px 0 5px 0 !important;
padding: 3px 0 3px 0;
}
* html .Menu .subMenu {
margin: 2px 0 5px 0 !important;
}
.Menu .subMenu li {
padding: 3px 0 3px 0; 
border: 0;
border-left: 1px dotted #6C6C6C;
}
.Menu .subMenu li a {
border: 0;
background-color: #000;
}
.Menu .subMenu li a:hover {
background: black;
color: #C0C0C0;
}
.Menu .subMenu li#subActive {
padding: 3px 6px 3px 8px;
font-style: italic;
background: #EFB52A;
color: black;
border: none;

}

.Menu li#active2 {
margin: 0 3px 0 0 !important;
padding: 3px 6px 3px 8px; /* Display: block won't work in this example, instead we are using padding */
color: #6c6c6c;
}