.MainMenu
{
    margin-top:0px;
    font-family:Verdana;
    font-size:12px;
    font-weight:normal;
    list-style: none;
    color:#696969;
    display:block;
}

.MainMenuItem
{
    float: left;
    display: block;
    position: relative;
    margin-left: 15px;
    text-align:left;
}

.MainMenuItem a { color:#6B6B6B; text-decoration:none; text-transform:uppercase; }

.MainMenuItem a:hover { text-decoration:underline; }

/* All <ul> tags in the menu including the first level */
.MainMenu  ul {
 margin: 0;
 padding: 0;
 list-style: none;
}

/* Submenus (<ul> tags) are hidden and absolutely positioned downwards from their parent */
.SubMenu{
 display:none; /*none*/
 position: absolute;
 top: 2.0em; 
 /*margin-top: 3px;*/ /* I'm using ems and px to allow people to zoom their font */ 
 left: -1px;
 width:130px;
 background-color:#E6E6E6;
}

.SubMenu .SubMenuItem{
 float: none;
 display:block;
 margin:0;
 width:130px;
 border-top:solid 1px white;
}

.SubMenu ul li a
{    
    margin-left:15px;
    text-align:left;
}

.MainMenu ul>li:last-child {
 margin-bottom: 1px; /* Mozilla fix */
}

/* Links inside the menu */
.MainMenu a {
 display: block;
 padding: 3px;
 text-decoration: none;
}



/*
 If you want per-item background images in your menu items, here's how to do it.
 1) Assign a unique ID tag to each link in your menu, like so: <a id="xyz" href="#">
 2) Copy and paste these next lines for each link you want to have an image:
    .MainMenu a#xyz {
      background-image: url(out.gif);
    }
    .MainMenu a#xyz:hover, .MainMenu a.highlighted#xyz, .MainMenu a:focus {
     background-image: url(over.gif);
    }
*/

/* Only style submenu indicators within submenus. */
.MainMenu a .subind {
 display: none;
}
.MainMenu ul a .subind {
 display: block;
 float: right;
}