body {

    font-family: Arial, sans-serif;

    background-color: #f0f0f0;

    color: #333;

    width: 900px;

    margin: 20px auto;

}

/* LINKS */

a {

    text-decoration: none;

    color: white;

}

a:hover {

    color: white;

}

/* NAVIGATION */

#nav {

    margin: 0 0 20px 0;

    overflow: visible;

    height: 60px;

    padding: 0;

}

/* Menú principal */
#nav > li {

    float: left;

    list-style-type: none;

    position: relative;

    width: 170px;

    margin-right: 10px;

    background-color: #555555;

    text-align: center;

    cursor: pointer;

    transition: 0.3s;

}

/* Hover menú principal */
#nav > li:hover {

    background-color: #459389;

}

/* Links principales */
#nav > li > a {

    display: block;

    padding: 18px;

    font-size: 22px;

    font-weight: bold;

    color: white;

}

/* SUBMENÚS */

#nav li ul {

    position: absolute;

    top: 60px;

    left: 0;

    width: 100%;

    padding: 0;

    margin: 0;

    list-style: none;

    display: none;

}

/* Opciones internas */
#nav li ul li {

    background-color: #555555;

    border-top: 1px solid #459389;

    transition: 0.3s;

}

/* Hover opciones internas */
#nav li ul li:hover {

    background-color: #459389;

}

/* Links internos */
#nav li ul li a {

    display: block;

    padding: 12px;

    font-size: 18px;

    color: white;

}

/* CLEARFIX */

#nav::after {

    content: "";

    display: block;

    clear: both;

}