.menu ul {
    float: left;
    list-style:none;
    margin-left:-40px;
}

.menu ul ul {
display: none;
}

    .menu ul li {
        padding: 20px 8px 20px 8px;
        text-align: center;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border-bottom: solid 1px #2d526f;
        position: relative;
        color: #ffffff;
    }

.menu ul li a {
    color: #ffffff;
    font-size:0.85em;
}

        .menu ul li:hover {
            background-color: #3a698e;
            color: #213c51;
        }

.menu ul li:hover a {
    color: #ffffff;
}

            .menu ul li:hover > ul {
                position: absolute;
                display: block;
                top: 0;
                left: calc( 100% + 40px);
                background: #3a698e;
                width: 160px;
                border-top: solid 3px #213c51;
            }

.menu ul li:hover > ul li {
    text-align: left;
    margin-left: -20px;
    color:#ffffff;
    padding:10px;
}

    .menu ul li:hover > ul a li {
        -webkit-transition: 0.5s ease-in-out;
        -moz-transition: 0.5s ease-in-out;
        -o-transition: 0.5s ease-in-out;
        transition: 0.5s ease-in-out;
    }

    .menu ul li:hover > ul a:hover li {
        color: #edf4f8;
        margin-left: 10px;
    }