Menú con filter que se me resiste - No sé como ordenarlo

[marlbran]

Muchas gracias, Sarlit.

Ayer mismo estuve con el mismo código que googleando pude encontrar. No conseguí hacerlo funcionar, supongo que porque no me enteraba de cómo colocar un id distinto para cada submenú.

De cualquier modo más tarde volveré a intentarlo con las pautas que me acabas de dar. De nuevo te estoy agradecidísimo. A ver si con esto logro lo que busco.


Por otra parte....

He conseguido finalmente colocar casi todo sólo jugando con el css, pero ahora se me ha agregado otro problema que no sé cómo resolver... Ni tampoco sé si tiene solución, la verdad.

Resulta que he conseguido centrar el menú que tengo. Que he conseguido que se abran los submenús como pretendía. Pero ahora cuando el submenú se despliega no tiene límite a un lado. Quiero decir, que las órdenes de "margin" no van, y en cuanto hago más pequeño el explorador o cuando se ve en móviles el submenú se sale por completo por el lateral, en vez de agrupar los items (el menú principal si lo hace correctamente).

Os dejo pantallazos de como se ve y como quisiera que se viera, tanto en pc como en móviles (espero que se entienda bien):

IMAGEN 1: De cómo se ve y cómo debería verse en ordenador




IMAGEN 2: De cómo se ve y cómo debería verse en móviles (o empequeñeciendo el explorador)





A ver si alguien me pudiera dar una pista de cómo podría hacer para que los "margin" funcionaran, o en todo caso decirme qué estoy haciendo mal o que parte me he saltado, que seguro hay más de una.

Copio código css que estoy usando ahora:

Código CSS:

/*==== PORTFOLIO FILTERS ====*/
 
#filters {
    text-align: center;
    z-index: 2;
    margin-bottom: 15px;
    margin-top: -15px;
    display: block;
}
 
#filters ul {
    display: inherit;
    list-style: outside none none;
}
 
#filters ul li {
    display: inline-block;
}
 
#filters ul li a {
    color: inherit;
    font-weight: bold;
}
 
#filters ul li a h3 {
    border: 2px solid;
    padding: 0 12px;
    margin: 0px 10px 0px 0px;
}
 
#filters ul li a:hover h3, #filters ul li a.active h3 {
    color: #ffd600;
}
 
#filters li > ul {
    display: none;
    float: right;
}
 
#filters li:hover > ul {
    display: inline-flex;
    display: -webkit-inline-flex;
    display: -moz-inline-flex;
    padding-top: 10px;
}
 
.genre:hover {
    cursor: default;
    max-width: 92px;
}
 
.roles:hover {
    cursor: default;
    max-width: 75px;
}
 
.roles > ul h3 {
    padding: 0 12px !important;
    width: 86px;
    margin-left: 10px !important;
}
 
.genre > ul a:hover h3, .genre > ul a.active h3, .roles > ul a:hover h3, .roles > ul a.active h3 {
    color: #ffd600 !important;
}
 
.genre a:hover h3, .genre a.active h3, .roles a:hover h3, .roles a.active h3 {
    color: #fff !important;
}