body {
    background-color: #184352;
}






.wrap {
    top: 0;
    left: 0;
    height: auto;
    width: 100%;
}






.menu-container {
    top: 0;
    left: 0;


    /* Ensure it is to the top, leftmost edge of the screen by using "absolute" */
    position: absolute;


    /* Make the menu span the entire page */
    width: 100%;


    /* Match the menu's background to the page's so that any unused space isn't noticeable */
    background-color: #184352;
}






.menu {
    font: bold 12px/18px sans-serif;
    text-align: center;
    display: inline;
    margin: 0;
    padding: 0;
    list-style: none;
}








.menu li {
    color: #B3B3B3;
    display: inline-block;
    margin-right: -2px;
    position: relative;
    padding: 12px 40px;
    border: 1px solid #9D9FA2;
    border-radius: 1.5px;
    background-color: #387593;
    cursor: pointer;
}



.menu li:hover {
    background-color: #5EAFDF;
    color: #fff;
}



.menu li:hover ul{
    display: block;
    opacity: 1;

    /* While hovered, make the drop-down menu appear.  The following will also avoid a block-level bug */
    visibility: visible;
}



.submenu {
    padding: 0;
    left: 0;
    position: absolute;
    top: 43.5px;
    width: 125.5px;
    opacity: 0;

    /* When not hovered over, make the drop-down menu hidden with the following.  The following will also avoid a block-level bug */
    visibility: hidden;
}



.submenu li {
    background-color: #387593;
    display: block;
    color: #B3B3B3;
}



.submenu li:hover {
    color: #fff;
    background-color: #5EAFDF;
}