HTML - Creacion 2 menus. Horizontal y Vertical

Buenas a todos/as.

Llevo un par de dias intentando crear dos menus para una pagina web.
Me gustaria que en una pagina de Inicio, hubiera un primer menu arriba, horizontal y por ejemplo con 4 palabras ( una lista con 4 contenidos) y que ya cuando se pinche en alguno ya me redirija a otras paginas.
Aparte en esa misma pagina un poco abajo a la izquierda, hubiera un menu Vertical con otras 4 palabras en forma de lista y que se abriera a otras opciones cuando paso el cursor sobre ello.

Como lo consigo? Ya lo tengo creado el primer menu horizontal pero " No logro centrarlo en la pantalla"- este sera mi primer punto que me gustaria resolver.

Tambien me gustaria que el segundo menu de la izquierda no quedara pegado al de arriba y cuando pasas el cursor sobre alguna opcion pues tuviera mas opciones. Se que es con un hover pero no se si lo estoy haciendo bien.

Si por ejemplo pinchamos en el menu de Arriba en Gestion Ventanas que es la primera opcion, el menu de la izquierda desplegable quedaria con la siguiente lista: Gestion Ventanas Hija 1 -con su submenu, Gestion Ventanas Hija 2 -con su submenu y asi...


Pongo mi codigo a ver si alguien me puede decir donde estoy fallando.

index.jsp

<nav class="menuPrincipal">
<ul>
<li><a href="ventana1.jsp">Gestión Ventanas</a></li>
<li><a href="ventana2.jsp">Servicios</a></li>
<li><a href="ventana3.jsp">Accesorios</a></li>
<li><a href="ventana4.jsp">Compras</a></li>
</ul>
</nav>

<div id="menu">
<ul id="lista1">

<li class="nivel1"><a href="#" class="nivel1">Gestión Ventanas Hija1</a>
<ul>
<li class="primera"><a href="#">Opción 2.1</a></li>
<li class="primera"><a href="#">Opción 2.1</a></li>
</ul>
</li>

<li class="nivel1"><a href="#" class="nivel1">Gestion Ventanas Hija 2</a>
<ul>
<li class="primera"><a href="#">Opción 2.1</a></li>
</ul>
</li>

<li class="nivel1"><a href="#" class="nivel1">Gestion Ventanas Hija 3</a>
<ul>
<li class="primera"><a href="#">Opción 3.1</a></li>
</ul>
</li>

<li class="nivel1"><a href="#" class="nivel1">Gestion Ventanas Hija 4</a>
<ul>
<li class="primera"><a href="#">Opción 4.1</a></li>
</ul>
</li>

</ul>
</div>


CSS

.menuPrincipal ul, .menuPrincipal li{
margin: 0;
padding: 0;
}

.menuPrincipal ul{
background-color: #578575;
list-style: none;
width: 100%;
}

.menuPrincipal li{
float: left;
position: relative;
width: 200px;
}

.menuPrincipal a{
background-color: #578575;
color: #FFFFFF;
display: block;
padding: 10px 25px;
text-align: center;
text-decoration: none;
}

.menuPrincipal li:hover a{
background-color: #7AB800;
}


#menu ul, #lista1 ul{
list-style: none;
padding: 0px;
margin: 0px;
width: 162px;
}

#menu li a{
display: block;
text-decoration: none;
padding: 5px 15px;
background-color: #578575;
color: #fff;
}

/* Borde superior de la primera pestaña */
#menu ul li.primera {
border-top: solid 1px #FFF;
}

#lista1 ul{
display: none;
}

#lista1 a{
display: block;
text-decoration: none;
color: #fff; /* Color del texto */
background-color: #578575; /* 399 Color de fondo */
border: solid 1px #fff; /* Borde de las pestañas */
border-top: none;
/**
* Tamaño entre celdas
*/
padding: 8px;
position: relative;
}

#lista1 :hover{
position: relative;
background-color: #7AB800; /* 6CC Cambio de color de las celdas cuando pasas el mouse sobre ellas */
color: #000; /* Color de texto al pasar el mouse */
}

/* Menu y Submenu */
#lista1 a:hover ul, #lista1 :hover ul{
display: block;
position: absolute;
/**
* Separación entre lo que el menu y el submenu
*/
left: 162px;
top:-1px!important; /* Con esto, hacemos que el submenu se quede al mismo nivel que el menu */
top: -31px;
}


Muchas gracias!