body {
    background-color: lightgray;
    color: darkgreen;
}

nav {
    font-size: large;
}

.dropdown,
.flyout {
    position: relative;
}

.dropdown after {
    content: "\25BC";
    font-size: .5em;
    display: block;
    position: absolute;
    top: 38%;
    right: 12%;
}

.drop-nav,
.flyout-nav {
    position: absolute;
    display: none;
}

.drop-nav li {
    border-bottom: 1px solid rgba(255, 255, 255, .2);
}

.dropdown:hover > .drop-nav,
.flyout:hover > .flyout-nav {
    display: block;
}

.flyout-nav {
    left: 100%;
    top: 0;
}

.flyout:hover a,
.flyout-nav {
    background-color: cornflowerblue;
}

.main-nav,
.drop-nav {
    background-color: navy;
}

.main-nav {
    float: left;
    border-radius: 4px;
    margin-top: 8px;
    border: solid 1px blue;
}

.main-nav > li {
    float: left;
    border-left: solid 1px blue;
}

.main-nav a {
    color: #fff;
    display: block;
    padding: 10px 30px;
    text-decoration: none;
}