Menu desplegable pero no del todo

[Lokitozzz]

Buenas, les cuento, estaba desarrollando un menu desplegable en mi web, todo bien hasta que tuve que agregar otra opción 'hijo' en la parte del menu 'padre', quiero que sean todos desplegable pero no sé porque se muestra hacía el lado, les dejo una imagen para que vean:



Pero lo que yo quiero es que donde dice CONTRATO & POLÍTICAS se muestre hacía abajo.

Les dejo el CSS que tengo:

Código CSS:

div#header nav {
    position: relative;
    float: right;
    width: 516px;
}
div#header nav ul {
    margin: 0;
    background: white;
    border: 1px solid #D0DDE4;
    border-radius: 4px;
    height: 35px;
    line-height: 36px;
}
div#header nav ul li {
    float: left;
    display: inline-block;
    list-style-type: none;
    padding-left: 5px;
    padding-right: 5px;
    border-right: 1px solid #DDD;
    font-family: 'Open Sans', Verdana, Helvetica, sans-serif;
    font-weight: bold;
}
div#header nav ul li:last-child {
    border-right: 0;
}
div#header nav ul li a:link, div#header nav ul li a:visited {
    border: 0;
    text-transform: uppercase;
    color: #0095E9;
    text-shadow: 1px 1px 1px rgba(116, 116, 116, 0.24);
}
div#header nav ul li a:hover, div#header nav ul li a:active {
    color: #02B8FF;
}
div#header nav ul li ul{
    display: none;
    position: absolute;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-left: -6px;
    z-index: 1;
}
div#header nav ul li:hover > ul{
    display: block;
    border-top: 0;
}
div#header nav ul li ul li{
 
}
 

Y también el html:

Código HTML:

<nav>
    <ul>
        <li><a href="#" target="_blank">Inicio</a></li>
        <li><a href="#">Contacto</a></li>
        <li><a href="#" target="_blank">Servicios</a>
            <ul>
                <li><a href="#">Contrato</a></li>
                <li><a href="#">Políticas</a></li>
            </ul>
        </li>
        <li><a href="#">Portafolio</a></li>
        <li><a href="#">Archivo</a></li>
    </ul>
</nav>
 

Gracias de antemano :D