rflfn

Depois que eu postei que percebi que podia usar o li e ul (já que aparecem em todos os submenus) ao invés de “tentar” colocar uma classe entre eles rsrsrs…

De qualquer forma eu também achei como fazer isso, nesse vídeo o cara mostra como adicionar a classe antes e depois:
http://www.youtube.com/watch?v=PTuiSvvxoC8

E neste vídeo tem um passo a passo bem explicado como criar um menu de 5 níveis, e funciona melhor do que pensei:
http://www.youtube.com/watch?v=7YaJnLNNeqE

Também dei uma “fuçada” no tema Twenty Thirteen e ele tem esse suporte ao menu personalizado (tinha olhado antes mas não tinha conseguido fazer funcionar…), dei uma olhada também no CSS dele e ele customiza o menu que funciona perfeitamente, o que é até bom porque sendo um tema oficial não há riscos desse código ser uma “gambiarras” rsrsrs…

Está ai a solução:

Aqui o código que chama o menu personalizado dentro da pagina que vai ficar o menu (no meu caso na index):

<div class="menu...">
<?php wp_nav_menu( array( 'theme_location' => 'ID_DO_MENU', 'menu_class' => 'nav-menu' ) ); ?>
</div>

Adicionar esse código no functions:

function register_my_menu() {
  register_nav_menu('ID_DO_MENU',__( 'Descrição do menu' ));
}
add_action( 'init', 'register_my_menu' );

E o CSS que tanto apanhei conseguir gerar automaticamente os submenus (obs: está com o estilo padrão do TwentyThirteen):

ul.nav-menu,
div.nav-menu > ul {
	margin: 0;
	padding: 0 40px 0 0;
}

.nav-menu li {
	display: inline-block;
	position: relative;
}

.nav-menu li a {
	color: #141412;
	display: block;
	font-size: 15px;
	line-height: 1;
	padding: 15px 20px;
	text-decoration: none;
}

.nav-menu li:hover > a,
.nav-menu li a:hover {
	background-color: #220e10;
	color: #fff;
}

.nav-menu .sub-menu,
.nav-menu .children {
	background-color: #220e10;
	border: 2px solid #f7f5e7;
	border-top: 0;
	display: none;
	padding: 0;
	position: absolute;
	left: -2px;
	z-index: 99999;
}

.nav-menu .sub-menu ul,
.nav-menu .children ul {
	border-left: 0;
	left: 100%;
	top: 0;
}

ul.nav-menu ul a,
.nav-menu ul ul a {
	color: #fff;
	margin: 0;
	width: 200px;
}

ul.nav-menu ul a:hover,
.nav-menu ul ul a:hover {
	background-color: #db572f;
}

ul.nav-menu li:hover > ul,
.nav-menu ul li:hover > ul {
	display: block;
}

.nav-menu .current_page_item > a,
.nav-menu .current_page_ancestor > a,
.nav-menu .current-menu-item > a,
.nav-menu .current-menu-ancestor > a {
	color: #bc360a;
	font-style: italic;
}

.menu-toggle {
	display: none;
}

Dessa forma tudo funciona como deveria \o/
Caso tenha outros submenus o CSS é gerado automaticamente pra cada um deles, não precisa limitar a quantidade de menus que o usuário pode utilizar.

Muito obrigado pela sua ajuda Leo!

É um menu horizontal, veja essa imagem:
http://imageshack.com/a/img33/6692/4xrw.png

Pode se perceber que ele adiciona automaticamente os números depois da classe ou ID da div, exemplo (102, 103, 104…)

Esse menu eu fiz ele através da opção “Aparência > Menus”, e adicionei o suporte pra ele no meu tema, até ai está funcionando normalmente, porém como você pode ver nessa imagem abaixo que referência o mesmo menu da imagem acima:
http://imageshack.com/a/img839/7460/os0c.png

O usuário pode configurar quantos submenus ele quiser, o problema é que eu não sei quantos submenus o usuário pode querer usar no tema, então eu tenho que fazer um código que faça isso automáticamente, que verifique se existe um novo submenu e adicione um css como os outros submenus anteriores, adicionando a classe “display:hidden” ou “display:none”, e ao passar o mouse chame a classe “display:block” para mostrar o submenu.

Por exemplo se eu tenho esse CSS:

/* Classe para ocultar o primeiro submenu */
#menu submenu_1 ul li{
	display:none;
}
#menu submenu_1 ul li:hover{
	display:none;
}

/* Classe para ocultar o segundo submenu */
#menu submenu_1 ul li .submenu_2{
	display:none;
}
#menu submenu_1 ul li .submenu_2:hover{
	display:none;
}

/* Classe para ocultar o terceiro submenu */
#menu submenu_1 ul li .submenu_2 ul li{
	display:none;
}
#menu submenu_1 ul li .submenu_2:hover ul li{
	display:none;
}

Porém eu não sei quantos submenus o usuário vai querer usar, então não acho certo por exemplo ter que deduzir que ele vai usar 10 subníveis de menu e fazer 10 códigos desse, ou então fazer 10 códigos CSS para os submenus e limitar o usuário a esse número, sendo que se ele usar por exemplo 11, o submenu de número 11 vai ficar desconfigurado.

Então o que eu queria fazer, é um código que consiga gerar esse código CSS automáticamente, verificando se há algum outro submenu e adiciona as classes pré-definida no primeiro CSS que for denifido para o menu. Como você pode ver que eu marquei na primeira imagem (102, 103, 104), da pra ver que ele segue algum padrão, então eu poderia aproveitar esse padrão para usar um código PHP no functions pra fazer isso, mas não sei como…

Não sei se você conseguiu entender, caso não tenha entendido ou tento explicar melhor.