Ciao ragazzi.
Ho un problema con il menu di un template Wordpress. Premetto che posto qui e non nella sezione CMS perché il problema mi sembra prettamente legato ai css.

Prima di chiedere aiuto a voi ho letto alcuni esempi in giro per la rete ma proprio con il css non ce la faccio e mi metto nelle vostre mani.

Ho un menu che mostra soltanto le categorie ma non le sottocategorie e vorrei implementarle.

Posto il codice relativo al solo menù di navigazione:

Questo il codice nell file header.php:
codice:
<div class="navcontainer">
	<ul id="nav">
	<li <?php if(is_home()) { echo ' class="current-cat" '; } ?>>Home
	<?php wp_list_categories('depth=1&hide_empty=0&orderby=name&order=ASC&title_li=&exclude=1' ); ?>		
	[/list]				
</div>
Questo il pezzo di codice del css:
codice:
/* NAVIGATION MENUS */

#pagemenucontainer {
	height: 30px;
	margin-top: 15px;
    float: right;
	}
	
#pagemenu {
	height: 30px;
    float: right;
	}

#pagemenu, #pagemenu ul { 
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;
	}
#pagemenu {
	margin-bottom: 1px;
	}
	
#pagemenu ul {
	float: left;
	list-style: none;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	}
	
#pagemenu li {
	float: left;
	list-style: none;
	margin: 0px;
	padding: 0px;
	}
	
#pagemenu ul li {
	list-style: none;
	margin: 0px;
	padding: 0px;
	}
	
#pagemenu li a, #pagemenu li a:link {
	color: #fff;
	display: block;
    margin: 0px 3px 0px 3px;
	padding: 7px 12px 7px 12px;
	text-decoration: none;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 11px;
	font-family: Arial, Helvetica, sans-serif;
    text-shadow: 0 1px 0 #000;
	}
	
#pagemenu li a:hover, #pagemenu li a:active {
	background: #1e1d1d;
	color: #fff;
	display: block;
	text-decoration: none;
	}
	
#pagemenu  li.current_page_item a {
	background: #1e1d1d;
	color: #fff;
	}

#pagemenu li:hover, #pagemenu li.sfhover { 
	position: static;
	}
	
.topright {
	text-align: left;
    margin: 20px 0 0 0;
	}

.topright a {
	color: #fff;
	text-decoration: none;
	font-size: 11px;
	font-family: Arial, Helvetica, sans-serif;
	vertical-align: top;
    text-transform: uppercase;
    text-shadow: 0 1px 0 #000;
	}


.navcontainer {
    height: 42px;
    }
    
#nav {
	height: 38px;
	}

#nav, #nav ul { 
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;
	}
#nav {
	margin-bottom: 1px;
	padding-left: 0px;
	}
	
#nav ul {
	float: left;
	list-style: none;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	}
	
#nav li {
	float: left;
	list-style: none;
	margin: 0px;
	padding: 0px;
	}
	
#nav ul li {
	list-style: none;
	margin: 0px;
	padding: 0px;
	}
	
#nav li a, #nav li a:link {
	color: #fff;
	display: block;
    margin: 0px 20px 0px 0px;
	padding: 11px 0px 5px 0px;
	text-decoration: none;
	font-size: 13px;
	font-weight: bold;
	text-transform: uppercase;
    text-shadow: 0 1px 0 #0d0d0d;
    border-bottom: 3px solid #282828;
	}
	
#nav li a:hover, #nav li a:active {
	color: #d55a4f;
	display: block;
	text-decoration: none;
    border-bottom: 3px solid #282828;
	}
	
#nav  li.current-cat a {
	color:#d55a4f;
    border-bottom: 3px solid #d55a4f;
	}

#nav li:hover, #nav li.sfhover { 
	position: static;
	}
Ringrazio infinitamente chi mi da una mano e soprattutto chi mi fa capire (magari evidenziandolo), cosa era da fare per ottenere il risultato voluto.

PS: Lo so, lo so che esistono i plugin per queste cose ma preferisco fare cosi :P

Grazie