problema com seletor para classe

[ju_rezende]

olá pessoal estou aprendendo a mexer com css e estou com uma dúvida

Estou criando um menu com sumenus, porém os submenus tem cor de fundo diferente e eles ficam com display none para aparecer quando o usuário clicar neles.

então no css fiz assim

ul#menu li a { display:block; text-decoration:none; padding-left:31px; color:#555;background:url(images/bgmenu.gif) no-repeat; margin:2px; height:19px; }

ul#menu a.curent { display:block; text-decoration:none; padding-left:31px; color:#555;background:url(images/bgmenu.gif) no-repeat; margin:2px; height:19px; }

ul#menu li a:hover { background:url(images/bgmenuover.gif) no-repeat; font-weight:bold;}

a.submenu { background:url(images/bgsubmenu.gif) no-repeat; padding-left: 45px;}

a:hover.submenu { background:url(images/bgsubmenuhover.gif) no-repeat}

ul#menu1 li a { background:url(images/bgsubmenu.gif) no-repeat; padding-left: 45px;}

ul#menu1 li a:hover { background:url(images/bgsubmenuhover.gif) no-repeat}

ul#menu1 li a:curent { background:url(images/bgsubmenuhover.gif) no-repeat}

e na página fiz o seguinte

<ul id="menu">

<li><a href="java script:void(0)" onClick="mostraElemento('submenu1');mostraElemento('esconde')">Estado</a>

<ul class="submenu" id="submenu1" style= 'display: none;'>

<li><a href="#" >Cadastrar Estado</a></li>

<li><a href="#">Editar Estado</a></li>

<li><a href="#">Visualizar Estado</a></li>

</ul>

</li>

<li><a href="java script:void(0)" onClick="mostraElemento('menu1');mostraElemento('esconde')">Cidade</a>

<ul id="submenu2" class="submenu" style= 'display: none;'>

<li><a href="#" >Cadastrar Cidade</a></li>

<li><a href="#">Editar Cidade</a></li>

<li><a href="#">Visualizar Cidade</a></li>

</ul>

</li>

<li><a href="java script:void(0)" onClick="mostraElemento('menu1');mostraElemento('esconde')">Bairro</a>

<ul id="submenu3" class="manu1" style= 'display: none;'>

<li><a href="#" >Cadastrar Bairro</a></li>

<li><a href="#">Editar Bairro</a></li>

<li><a href="#">Visualizar Bairro</a></li>

</ul>

</li>

</ul>

o problem é que só consigo o resultado que eu gostaria no submenu bairro, onde coloquei um criei no css um para seu id as novas configurações mas como esta parte será autoadministrável, não teri como criar estilos para cada id, então pensei em usar classe, mas não consigo os mesmos efeito.

Vou colocar o link da página para que possa visualizar os efeitos do menu lateral

link para o site

Desde já grata pela atenção

Boa tarde a todos

[_Vinny_]

<li><a href="java script:void(0)" onClick="mostraElemento('submenu1');mostraElemento('esconde')">Estado</a>

<ul class="submenu" id="submenu1" style= 'display: none;'>

<li><a href="#" >Cadastrar Estado</a></li>

<li><a href="#">Editar Estado</a></li>

<li><a href="#">Visualizar Estado</a></li>

</ul>

</li>

<li><a href="java script:void(0)" onClick="mostraElemento('submenu2');mostraElemento('esconde')">Cidade</a>

<ul id="submenu2" class="submenu" style= 'display: none;'>

<li><a href="#" >Cadastrar Cidade</a></li>

<li><a href="#">Editar Cidade</a></li>

<li><a href="#">Visualizar Cidade</a></li>

</ul>

</li>

<li><a href="java script:void(0)" onClick="mostraElemento('menu1');mostraElemento('esconde')">Bairro</a>

<ul id="menu1" class="manu1" style= 'display: none;'>

<li><a href="#" >Cadastrar Bairro</a></li>

<li><a href="#">Editar Bairro</a></li>

<li><a href="#">Visualizar Bairro</a></li>

</ul>

</li>

Já experimentou trocar a class e id para o mesmo de bairro?

[ju_rezende]

mas aí não fica semantico memo id iguais para todos os submenus não é?