Hola a todos.
Ando algo desquiciado desde hace tres días con un menu que no alcanza a dominar.
Se trata de un menu para filtrar categorías de portfolio en wordpress.
Hasta ahora he logrado, más o menos, lo que buscaba, pero tengo dos problemas para los que no encuentro solución, y estoy casi convencido de que son unas tonterías en css, pero que yo, seminovato, no doy para más.
Os dejo unos pantallazos de cómo está y de cómo quisiera que estuviera.
1ª IMAGEN 
2ª IMAGEN 
3ª IMAGEN 
Intentaré explicarme lo mejor posible.
En primer lugar me gustaría poder centrar el "menú" principal. Si lo intento con display=inline-block o con position=abolute se me fasticia todo lo demás y aún es más complicado solucionarlo. Así que hasta ahora sólo he conseguido que se viera más o menos bien el menú desplazado a la izquierda.
Lo otro que me trae totalmente de cabeza es que cuando abro el submenú del penúltimo item del menú ("Géneros"), el submenú se despliega correctamente (no centrado como quisiera pero bien), pero me desplaza el último item del menú principal ("Roles") por detrás del submenú que había desplegado.
Lo que necesito es que ese item de menú ("Roles") no se mueva del sitio. Que no se rompa el menú, vamos.
La verdad es que no sé si me estoy sabiendo explicar de forma comprensiva. Cualquier duda, por favor, preguntadmela. Estoy muy interesado en resolver esto lo más pronto que pueda.
Os dejo copia de todo el css que estoy usando ahora, aunque sé que estará lleno de errores.
Código CSS:
Ver original/*==== PORTFOLIO FILTERS ====*/
#filters {
margin-top: 10px;
margin-bottom: 0px;
text-align: center;
display: block;
float: none;
z-index: 2;
position: relative;
}
#filters ul {
margin: 0;
list-style: none;
padding: 0;
}
#filters ul li {
display: inline;
}
#filters ul li a {
display: block;
float: left;
padding: 2px 5px;
color: inherit;
margin-right: 5px;
margin-bottom: 5px;
font-weight: bold;
}
#filters ul li a h3 {
font-size: 18px;
padding: 2px 6px 0px;
border: 2px solid;
}
#filters ul li a:hover h3, #filters ul li a.active h3 {
color: #FFD600;
}
#filters li > ul {
display: none;
}
#filters li:hover > ul {
display: inline-block;
width: 100%;
padding-top: 20px;
margin-top: -27px;
}
.genre:hover {
cursor: default;
}
.roles:hover {
cursor: default;
}
La web, por si queréis ver en vivo lo que os comento es: xxx
Espero que algún alma caritativa me pueda echar una mano, porque lo estoy llevando fatal.
