css top menu

#nav-menu
{   width:95%   }

#nav-menu ul
{   list-style: none;
    padding: 0;
    margin: 0;
}

#nav-menu li
{   float: left;
    margin: 0 0.15em;
}

#nav-menu li a
{   height: 2em;
    line-height: 2em;
    float: left;
    width: 9em;
    display: block;
    border: 0.1em solid #dcdce9;
    color: #0d2474;
    text-decoration: none;
    text-align: center;
}

/* the following controls the look of the list items */
#nav-menu ul li
{   position: relative; }


/* this looks weird because of the nesting, any UnorderedLists in a list item
will now be directly under (top=0) and to the right (left=149 pixels) of the original
list item.  "display: none" is vital to hiding the list unless hovered
 left: 149px;
*/

#nav-menu li ul {
    position: absolute;
    left: 0px;
    top: 2em;
    display: none;
    }



/* when a list item is hovered over it will display the nested UnorderedList as a block */
#nav-menu li:hover ul {
display: block;
z-index: 100;
}

/* Hide from IE5-Mac \*/
#nav-menu li a
{   float: none }