#TopMenu {
font-family: Arial, sans-serif;
float: left;
margin-top: -70px;
margin-left: 500px;
position: relative;
width: 315px;
z-index: 100;
}

#TopMenu ul {
text-align: right; /* We are using text-align: center on ul to horizontally align our menu to the page. If you want the menu aligned left or right just change text-align to either left or right */
margin: 0 0 5px 0; /* Just some margin to align the blue border below the menu */
}

#TopMenu li {
display: inline; /* Menu links are horizontally aligned using display: inline */
margin: 0;
}

#TopMenu li a {
padding: 4px 10px; /* Display: block won't work in this example, instead we are using padding to make the hole tab a clickable link */
background-color: #515151;
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
float: left;
margin: 0 0 0 1px;
/*background: url(../styleImages/navigation/ActiveTabLeft.gif) no-repeat left top; Rollover effect using "Fast rollovers without preload" concept for the left part of the tab */
}

#TopMenu li a:hover {
/*background: url(../styleImages/navigation/OnHoverTabLeft.gif) no-repeat left bottom;*/
padding: 4px 10px;
background-color: #fde104;
color: #515151;
}

/*
#TopMenu li a span {
padding: 7px 10px 6px 0;
background: url(../styleImages/navigation/ActiveTabRight.gif) no-repeat right top; Rollover effect using "Fast rollovers without preload" concept for the right part of the tab */
}

/*#TopMenu li a:hover span {
background: url(../styleImages/navigation/OnHoverTabRight.gif) no-repeat right bottom;
padding: 7px 10px 6px 0;
}
*/