.Menu {
font-family: Verdana, Arial, Helvetica, sans-serif;
border-bottom: 1px solid #999;
font-size: 10pt;
text-align: center; /* 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: -1px 0 -1px 0 !important;
padding: 0; /*used to be 3px bottom */
background: #FFFFFF;
}
.Menu li {
margin: 0 2px 0 2px !important;
border-bottom: none;
display: inline; /* Menu links are horizontally aligned using display: inline */
}
.Menu li a {
margin: 0 3px 0 3px;
padding: 4px 9px 4px 9px; /* Display: block won't work in this example, instead we are using padding */
color: #444;
text-decoration: none;
border: 1px solid #999;
background: #eeeeee;
}
.Menu li a:hover {
color: #006;
}
.Menu li#active {
margin: 0 3px 0 3px !important;
font-weight:bold;
padding: 4px 6px 4px 8px; /* Display: block won't work in this example, instead we are using padding */
background: #FAFAFA;
border: 1px solid #999;
border-bottom: 1px solid #FAFAFA;
}
.Menu .subMenu {
float: left;
text-align: center; /* 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: 5px 0 1px 0 !important;
padding: 3px 0 5px 0;
border-bottom: 1px solid #999;
font-size: 9pt;
background: #FAFAFA;
}
* html .Menu .subMenu {
margin: 2px 0 5px 0 !important;
}
.Menu .subMenu li {
padding: 2px 0 4px 0; 
border: 0;
font-weight:400;
}
.Menu .subMenu li a {
border: 0;
background-color: #FAFAFA;
}
.Menu .subMenu li a:hover {
color:#006;
}
.Menu .subMenu li.subActive {
font-weight: bold;
}