nav {
    width: 1200px;
    margin: 0 auto;
}
nav ul {
    list-style: none;
    text-align: center;
}
nav > ul > li {
    float: left;
}
nav a {
    background: hsl(200, 80%, 50%);
    min-width: 160px;
    padding: 10px 0;
    margin: 2px;
    color: hsl(0, 0%, 100%);
    box-shadow: 0 1px 3px hsla(0, 0%, 0%, 0.5);
    display: block;
}
nav a:hover {
    background-color: hsl(200, 80%, 35%);
}
nav i {
    float: right;
    margin-right: 15px;
    font-size: 20px !important;
}
nav li ul {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    min-width: 160px;
    z-index: -1;
    -webkit-transform: translateY(-50px);
    -moz-transform: translateY(-50px);
    -o-transform: translateY(-50px);
    -ms-transform: translateY(-50px);
    transform: translateY(-50px);
    -webkit-transition: all 0.3s ease-out;   
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
nav li:hover > ul {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition: all 0.3s ease-out;   
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
nav li ul li {
    position: relative;
}
nav li ul li ul {
    right: -162px;
    top: 10px;
}