A ver... Tengo una buena noticia, que no es otra que (al fin) he logrado lo que buscaba, centrar los menus y hacer que aparezcan tal como me había marcado como objetivo.
Lo he hecho con un javascript muy sencillo (sencillo ahora que sé como va, pero que me ha costado tres días descubrirlo -porque soy un novato-). Además, tengo la sensación de a partir de aquí será más fácil conseguir solucionar el problema que ahora me ha surgido (si alguien puede ayudarme, claro).
Como digo, ahora tanto el menú como los submenús aparecen y están organizados como quería, pero el problema con el que me encuentro ahora es que una vez aparece el submenú, me es imposible acercar el puntero sin que desaparezca.
He usado un onmouseover y un onmouseout para que los submenús aparezcan y desaparezcan sólo cuando se pasa el puntero encima. No me interesa que se queden a la vista con un click o algo así, sino que sean más dinámicos.
La cosa está en que no tengo ni idea (llevo días sin dormir a cuenta de estoy y mi cerebro no da para más) de que debo hacer para que los submenús se queden estático al menos para que el puntero pase por encima para seleccionar el item que el usuario quiera.
Como siempre no sé si me estoy sabiendo explicar demasiado bien.
Os dejo el html y el css que ahora estoy usando (los he cambiado bastante respecto a los primeros que puse):
HTML
Código PHP:
Ver original<!-- START PORTFOLIO FILTERING -->
<div id="filters" class="sixteen columns">
<ul class="styled-list clearfix">
<li><a href="#" data-filter="*" class="active"><h3><?php _e('Todos', 'doblerol'); ?></h3></a></li>
<li><a href="#" data-filter=".term-votados"><h3><?php _e('+ Votados', 'doblerol'); ?></h3></a></li>
<li><a href="#" data-filter=".term-cortos-finalistas"><h3><?php _e('Cortos finalistas', 'doblerol'); ?></h3></a></li>
<li><a><h3><div id="genre" onmouseover="document.getElementById('subgenre').style.display = 'block';" onmouseout="document.getElementById('subgenre').style.display = 'none';"><?php _e('Género', 'doblerol'); ?></div></h3></a></li>
<li><a><h3><div id="roles" onmouseover="document.getElementById('subroles').style.display = 'block';" onmouseout="document.getElementById('subroles').style.display = 'none';"><?php _e('Roles', 'doblerol'); ?></div></h3></a></li>
</ul>
<div id="subgenre" style="display: none;"><ul>
<li><a href="#" data-filter=".term-absurdo"><h3>Absurdo</h3></a></li>
<li><a href="#" data-filter=".term-comedia"><h3>Comedia</h3></a></li>
<li><a href="#" data-filter=".term-absurdo"><h3>Absurdo</h3></a></li>
<li><a href="#" data-filter=".term-comedia"><h3>Comedia</h3></a></li>
<li><a href="#" data-filter=".term-absurdo"><h3>Absurdo</h3></a></li>
<li><a href="#" data-filter=".term-comedia"><h3>Comedia</h3></a></li>
<li><a href="#" data-filter=".term-comedia"><h3>Comedia</h3></a></li>
<li><a href="#" data-filter=".term-absurdo"><h3>Absurdo</h3></a></li>
</ul></div>
<div id="subroles" style="display: none;"><ul>
<li><a href="#" data-filter=".term-2personajes"><h3><?php _e('2 personajes', 'doblerol'); ?></h3></a></li>
<li><a href="#" data-filter=".term-3personajes"><h3><?php _e('3 personajes', 'doblerol'); ?></h3></a></li>
<li><a href="#" data-filter=".term-4personajes"><h3><?php _e('4 personajes', 'doblerol'); ?></h3></a></li>
</ul></div>
</div><!-- END PORTFOLIO FILTERING -->
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-block;
}
#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;
}
#genre:hover {
cursor: default;
}
#roles:hover {
cursor: default;
}
Para que veáis a qué me refiero exactamente os paso el link de la web (los menús en cuestión están haciendo scroll abajo hasta la sección "Cortometrajes en concurso"):
www.certamen.doblerol.com
Gracias, Sarlit, porque sin tu sugerencia no hubiera llegado hasta aquí.