[Resolvido] Espaço entre botões

[GabrielFerrari 41]

Boa tarde.

 

Estou com um probleminha bem chato aqui.

Já postei um problema com esse menu mas agora me apareceu outro.

 

Estou montando um site e nele tem um menu accordion com Jquery e está sendo editado com CSS

Ele tem um espaço entre um botão e outro como pode ser visto nesse link: http://usion.ind.br/novo_site/

 

Se você abrir um dos sub-menus pode ver que ele tem uma parte cinza um pouco menor que o botão centralizada nele.

O problema é que entre ela e o botão fica um espaço vazio.

 

Estou precisando deixar essa parte cinza também mas sem perder o distanciamento de um botão para o outro quando tudo está fechado.

 

O código pode ser encontrado todo na página.

 

O CSS externo está assim:

 

Usei quote para deixar em negrito a parte que deixa a faixa cinza no sub-menu

 

* {

margin:0;

padding:0;

list-style:none;

}

img{

behavior: url(iepngfix.htc)

}

body {

font-family: Arial;

font-size: 16px;

}

.tudo{

 

}

.fundo{

position:absolute;

z-index: 0;

}

.menu{

position:absolute;

width:158px;

padding-top:335px;

padding-left:30px;

z-index:2;

}

ul li {

width: 140px;

background-color:#ccc;

margin-left: 5px;

padding-bottom: 5px;

}

 

.conteudo{

position:absolute;

width:670px;

padding-top: 365px;

padding-left: 300px;

z-index:1;

}

#barra_amarela{

position:absolute;

z-index:3

}

.linhatpl{

color:#FFF;

border:1px dashed #CCCCCC;

border-left: 0px;

border-right: 0px;

border-top: 0px;

padding-bottom: 25px;

}

.esp_lin{

padding-bottom: 25px;

}

 

 

Obrigado.

[Rafelles 0]

thelon, vê se essa alteração na lista resolve:

ul li {
background-color:#CCCCCC;
margin:-4px 0 0 5px;
padding:3px 0 3px 5px;
width:135px;
}

[GabrielFerrari 41]

Cara funcionou era isso mesmo porém quando se amplia o menu ele mostra o pedaço do cinza "crescendo"

Como se os botões estivessem com alguma borda

 

Porém eu retirei todas as bordas e margens.

 

Obrigado pela ajuda.