Dar formato a un nuevo menu wordpress

[ulises2010]

Buenos días,

Estoy creando un nuevo menú en wordpress, para ello lo he nombrado en el functions.php con:

Código:

register_main_menus() {

Luego, en el lugar donde lo quiero crear (en la parte de arriba del header) he incluido este código

Código:

<?php $menuClass = 'clase_top_menu';
				$topNav = '';

				if (function_exists('wp_nav_menu')) {
					$topNav = wp_nav_menu( array( 'theme_location' => 'top-menu', 'container' => '', 'fallback_cb' => '', 'menu_class' => $menuClass, 'echo' => false ) );
				};
				if ($topNav == '') { ?>
					<ul class="<?php echo $menuClass; ?>">
<?php show_page_menu($menuClass,false,false); ?>
<?php show_categories_menu($menuClass,false); ?>
</ul> <!-- end ul.nav -->
				<?php }
				else echo($topNav); ?>

Y la verdad es que funciona porque ya puedo añadir items al menú desde el wordpress, pero lo que ahora no se es como dar formato a este menú, de hecho ni siquiera soy capaz de que aparezca en horizontal en vez de en vertical, me gustaría algo parecido al típico menú horizontal con línea de separación entre items y demás... ¿me podeis ayudar?

Podeis ver lo que os digo aquí:

http://productosuniversitarios.org/es/

Y el menú que no se formatear es el de los tres items de arriba a la izquierda.

Gracias

[kraneok]

Bueno, para lo que deseas debes saber algo de CSS y supongo que no tienes mucha idea, te explico.

El CSS del menú desplegable debe ser mas o menos como

ul.padre

ul li

ul li:hover

ul li:hover ul.hijo

Para comenzar, debes poner los ul li, como display: inline;, ya que un elemento <li> por defecto es block, lo que conlleva que se apilen en forman de pila.
Por otro lado, ul.parent debe tener esta regla, list-style: none; así logramos quitar los marcadores de una lista como es ul.

Código:

ul.padre
{
       margin:    0;
       padding:  0;
       list-style:  none;
}

ul.padre li
{
       /* Permite a esta etiqueta alinear en forma horizontal 
           también puede lograrse con float:left, aunque me parece mas límpio 
           usar este método. */
       display:     inline;
}

ul.padre li:hover
{
        /* La única relevancia del uso de hover en los <li> de primer nivel es para
           realizar cambios en el aspecto físico : ej.*/
           color:       red; /* Torna el texto contenido del <li> a rojo. */
}

ul.padre ul.hijo
{
      /* Si disponemos de un submenu en alguno de los <li> de primer nivel, 
          por defecto está oculto */
         display: none;
}

ul.padre li:hover ul.hijo
{
      /* Si disponemos de un submenu en alguno de los <li> de primer nivel, 
          aquí permitimos que se muestren cuando se mueve el cursor del ratón   
         por  el área de ese <li> */
         display: block;
}

Como ves, ese muy sencillo formatear un menú con submenús desplegable con CSS, sin embargo, esto es lo básico, hay gente que sabe muchísimo mas que yo, pero desde aquí te animo a que seas tu el que vaya probando y aprendiiendo por tu cuenta.

Como ves, he añadido dos clases para mantener el código algo mas legible y fácil de entender, sin embargo, se puede conseguir sin utilizar clases.