Bug em <div> e <ul>

Caros amigos do fórum InMasters,

Tenho um menu à direita do meu site que está em uma estrutura de <div> e os botões são <ul>. Vejam o site:

http://ragnacorp.forbrazil.com.br/siteteste/teste.html

Porém, como podem ver na codificação, tive que fazer três estilos diferentes, um para o primeiro botão do menu, outro para os botões do meio e outro para o último botão, definindo margens diferentes para os três estilos, para que não ocorresse um bug.

Eis o código sem bug:

Estilo:

#botao_menu_direita {
 padding: 3px 10px;
 margin: 1px 17px;
 background: #39465A;
 height: 14px;
 width: 118px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 }
 #botao_menu_direita_primeiro {
 padding: 3px 10px;
 margin: 0px 17px;
 background: #39465A;
 height: 14px;
 width: 118px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 }
 #botao_menu_direita_ultimo {
 padding: 3px 10px;
 margin: 0px 17px;
 background: #39465A;
 height: 14px;
 width: 118px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 }

Estrutura:

<div id="menu_direita">
 <ul id="menu_direita_sub_1_topo">
 </ul>
 <ul id="menu_direita_sub_1_meio">

 <ul id="botao_menu_direita_primeiro">
 Página Principal
 </ul>
 <ul id="botao_menu_direita">
 teste
 </ul>
 <ul id="botao_menu_direita">
 teste
 </ul>
 <ul id="botao_menu_direita">
 teste
 </ul>
 <ul id="botao_menu_direita_ultimo">
 teste
 </ul>
 </ul>
 <ul id="menu_direita_sub_2_topo">
 </ul>
 <ul id="menu_direita_sub_2_meio">
 <ul>
 <ul id="botao_menu_direita_primeiro">
 teste
 </ul>
 <ul id="botao_menu_direita">
 teste
 </ul>
 <ul id="botao_menu_direita_ultimo">
 teste
 </ul>
 </ul>
 <ul id="menu_direita_sub_3_topo">
 </ul>
 <ul id="menu_direita_sub_3_meio">
 <ul>
 <ul id="botao_menu_direita_primeiro">
 teste
 </ul>
 <ul id="botao_menu_direita">
 teste
 </ul>
 <ul id="botao_menu_direita_ultimo">
 teste
 </ul>
 </ul>
 </ul>
 <ul id="menu_direita_sub_4_topo">
 </ul>
 <ul id="menu_direita_sub_4_meio">
 <ul>
 <ul id="botao_menu_direita_primeiro">
 teste
 </ul>
 <ul id="botao_menu_direita">
 teste
 </ul>
 <ul id="botao_menu_direita_ultimo">
 teste
 </ul>
 </ul>
 </ul>
 <ul id="menu_direita_sub_4_rodape">

 </ul>
 </div>

Assim está tudo perfeito, porém, como eu disse, uso três estilos diferentes numa série de botões iguais.

Vejam como fica o site com um estilo igual para todos:

http://ragnacorp.forbrazil.com.br/siteteste/teste2.html

Estilo:

#botao_menu_direita {
 padding: 3px 10px;
 margin: 1px 17px;
 background: #39465A;
 height: 14px;
 width: 118px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 }

Estrutura:

<div id="menu_direita">
 <ul id="menu_direita_sub_1_topo">
 </ul>
 <ul id="menu_direita_sub_1_meio">

 <ul id="botao_menu_direita">
 Página Principal
 </ul>
 <ul id="botao_menu_direita">
 teste
 </ul>
 <ul id="botao_menu_direita">
 teste
 </ul>
 <ul id="botao_menu_direita">
 teste
 </ul>
 <ul id="botao_menu_direita">
 teste
 </ul>
 </ul>
 <ul id="menu_direita_sub_2_topo">
 </ul>
 <ul id="menu_direita_sub_2_meio">
 <ul>
 <ul id="botao_menu_direita">
 teste
 </ul>
 <ul id="botao_menu_direita">
 teste
 </ul>
 <ul id="botao_menu_direita_">
 teste
 </ul>
 </ul>
 <ul id="menu_direita_sub_3_topo">
 </ul>
 <ul id="menu_direita_sub_3_meio">
 <ul>
 <ul id="botao_menu_direita">
 teste
 </ul>
 <ul id="botao_menu_direita">
 teste
 </ul>
 <ul id="botao_menu_direita">
 teste
 </ul>
 </ul>
 </ul>
 <ul id="menu_direita_sub_4_topo">
 </ul>
 <ul id="menu_direita_sub_4_meio">
 <ul>
 <ul id="botao_menu_direita">
 teste
 </ul>
 <ul id="botao_menu_direita">
 teste
 </ul>
 <ul id="botao_menu_direita">
 teste
 </ul>
 </ul>
 </ul>
 <ul id="menu_direita_sub_4_rodape">

 </ul>
 </div>

Pode-se perceber que utilizando o mesmo estilo para todos, o site buga em cada seção do menu. Não sei se o problema é nessa estruturação dos botões ou em seu estilo, ou então na estruturação da div que fica por trás do menu.

Alguma luz gente?

Abraços!