/*****  Nav bar style ****/
a {
    text-decoration: none;
}

div.menuBar {
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size: 1.5em;
    font-style: normal;
    font-weight: normal;
    color: white;
}

ul.nav,
.nav ul {
    /* Remove all spacings from the list items */
    margin: 0;
    padding: 0;
    cursor: default;
    list-style-type: none;
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    display: inline;
}

ul.nav {
    display: table;
    width: 100%;
    table-layout: fixed;
}

ul.nav>li {
    display: table-cell;
    position: relative;
    font-size: 1.5em;
    padding: 5px 6px;
}

ul.nav li>ul {
    /* Make the sub list items invisible */
    display: none;
    position: absolute;
    max-width: 160px;
    margin-left: -6px;
    margin-top: 5px;
}


ul.nav li:hover>ul {
    /* When hovered, make them appear */
    display: block;
}

ul.nav li:hover>ul li{
    font-size: 1em;
}

.nav ul li a {
    /* make the hyperlinks as a block element, sort of a hover effect */
    display: block;
    padding: 5px 10px;
}

/* Menu color (customizable) */
ul.nav,
.nav ul,
ul.nav li a, 
.nav ul li a {
    background-color: #333399;
    color: white;
}

ul.nav li:hover,
ul.nav li a:hover,
.nav ul li a:hover {
    background-color: #369;
    color: #fff;
}

ul.nav li:active,
ul.nav li a:active,
.nav ul li a:active {
    background-color: #036;
    color: #fff;
}

ul.nav,
.nav ul {
    border: 1px solid white;
}

.nav a {
    text-decoration: none;
}