Error En Menu Colapsable Css Y Javascript

[coirini]

tengo un problema con un menu colapsable hecho con css y javascript y quería saber si alguien me puede ayudar a corregir el error.

en botonera.htm tengo el siguiente codigo:

<meta name="save" content="history" />
<link href="estilos.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/javascript" src="../scripts.js"></script>
<noscript>
<style type="text/css">
<!--
.dspcont{display:block;}
//-->
</style>
</noscript>
<div class="save">
<ul id="navi">
<li class="titulos">CONSULTE</li>
<ul id="navi">
<li>
<h4><a href="javascript:void(0)" class="dsphead"
onclick="dsp(this)"> <span class="dsphead">+</span> Actividades Recreativas</a></h4>
<div class="dspcont">
<ul id="navi">
<li><a href="../paginas/acuaticas.htm">Activid. Acu&aacute;ticas </a> </li>
<li><a href="../paginas/aereas.htm">Activid. A&eacute;reas</a> </li>
<li><a href="../paginas/cablecarril.htm">Cablecarril</a> </li>
<li><a href="../paginas/caza.htm">Caza Mayor y Menor</a> </li>
<li><a href="../paginas/citytour.htm">City tour</a> </li>
<li><a href="../paginas/cabalgatas.htm">Cabalgatas</a> </li>
<li><a href="../paginas/canotaje.htm">Canotaje</a> </li>
<li><a href="../paginas/cicloturismo.htm">Cicloturismo</a> </li>
<li><a href="../paginas/circaventura.htm">Circ. de Aventuras</a> </li>
<li><a href="../paginas/croteadas.htm">Croteadas</a> </li>
<li><a href="../paginas/cuatriciclos.htm">Cuatriciclos</a> </li>
<li><a href="../paginas/depmontania.htm">Deportes de monta&ntilde;a</a> </li>
<li><a href="../paginas/escaladas.htm">Escalada</a> </li>
<li><a href="../paginas/guias.htm">Gu&iacute;a en moto enduro</a> </li>
<li><a href="../paginas/jumar.htm">Jumar</a> </li>
<li><a href="../paginas/mountainbike.htm">Mountainbike</a> </li>
<li><a href="../paginas/paintball.htm">Paintball</a> </li>
<li><a href="../paginas/palestra.htm">Palestra</a> </li>
<li><a href="../paginas/pesca.htm">Pesca</a> </li>
<li><a href="../paginas/puente2cuerdas.htm">Puente de 2 cuerdas</a> </li>
<li><a href="../paginas/puentetibetano.htm">Puente Tibetano </a> </li>
<li><a href="../paginas/rappel.htm">Rappel</a> </li>
<li><a href="../paginas/safari_foto.htm">Safari Fotogr&aacute;fico</a> </li>
<li><a href="../paginas/tirolesa.htm">Tirolesa</a> </li>
<li><a href="../paginas/4x4.htm">Traves&iacute;as 4x4</a> </li>
<li><a href="../paginas/trekking.htm">Trekking</a> </li>
</ul>
</div>
<li>
<h4><a href="javascript:void(0)" class="dsphead"
onclick="dsp(this)"> <span class="dsphead">+</span> Alojamiento</a></h4>
<div class="dspcont">
<ul id="navi">
<li><a href="../paginas/albergues.htm">Albergues</a> </li>
<li><a href="../paginas/hospedar.htm">Apart Hotel</a> </li>
<li><a href="../paginas/base_camp.htm">B&ordm; de Campamento</a> </li>
<li><a href="../paginas/bed_breakfast.htm">Bed &amp; Breakfast</a> </li>
<li><a href="../paginas/bungalows.htm">Bungalows</a> </li>
<li><a href="../paginas/cabanias.htm">Caba&ntilde;as</a> </li>
<li><a href="../paginas/camping.htm">Campings</a> </li>
<li><a href="../paginas/casa_de_campo.htm">Casas de Campo</a> </li>
<li><a href="../paginas/casas.htm">Casas y Deptos.</a> </li>
<li><a href="../paginas/estancias.htm">Estancias</a> </li>
<li><a href="../paginas/granja_ed.htm">Granja Educativa</a> </li>
<li><a href="../paginas/hospedaje.htm">Hospedajes</a> </li>
<li><a href="../paginas/hosteria.htm">Hoster&iacute;a/Posada</a> </li>
<li><a href="../paginas/hotel.htm">Hoteles</a> </li>
<li><a href="../paginas/pension.htm">Casa p/estudiantes </a> </li>
<li><a href="../paginas/quintas.htm">Quintas y Countrys</a> </li>
<li><a href="../paginas/spa.htm">Spa</a> </li>
<li><a href="../paquetes/index.htm" target="_blank">Paquetes Alojamiento</a> </li>
</ul>
</div>
<li>
<h4><a href="javascript:void(0)" class="dsphead"
onclick="dsp(this)"> <span class="dsphead">+</span> Centro Comercial</a></h4>
<div class="dspcont">
<ul id="navi">
<li><a href="../paginas/alarmas.htm">Alarmas</a> </li>
<li><a href="../paginas/amoblamientos.htm">Amoblamientos</a> </li>
<li><a href="../paginas/cerrajeria.htm">Cerrajer&iacute;as</a> </li>
<li><a href="../paginas/comput.htm">Computaci&oacute;n</a> </li>
<li><a href="../paginas/cybercafe.htm">Cyber Caf&eacute;s</a> </li>
<li><a href="../paginas/cuadros.htm">Cuadros y Pinturas </a> </li>
<li><a href="../paginas/decoracion.htm">Decoraci&oacute;n</a> </li>
<li><a href="../paginas/casas_rodantes.htm">Fabr. Casas Rodantes</a> </li>
<li><a href="../paginas/fotografia.htm">Fotograf&iacute;a</a> </li>
<li><a href="../paginas/indumentaria.htm">Indument. y Objetos</a> </li>
<li><a href="../paginas/muebles.etnicos.htm">Muebles &Eacute;tnicos</a> </li>
<li><a href="../paginas/papeleria.htm">Papeler&iacute;a</a> </li>
<li><a href="../paginas/tejidos.htm">Tejidos artesanales</a> </li>
<li><a href="../paginas/telefonia.htm">Telefon&iacute;a</a> </li>
<li><a href="../paginas/videoclub.htm">Video Club</a> </li>
<li><a href="../paginas/viveros.htm">Viveros</a> </li>
</ul>
</div>
</li>
<li><a href="../alternativa/index.asp">Clasificados</a> </li>
<li><a href="../paginas/construccion.htm">Construcciones</a> </li>
<li><a href="../paginas/educ.htm">Educaci&oacute;n</a> </li>
<li><a href="../paginas/spa_belleza.htm">Fitness y Belleza</a> </li>
</ul>
</div>

estilos.css:

.save{
behavior:url(#default#savehistory);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #FFFFFF;
width: 160px;
background-color: #000000;
}
.dspcont{
display:none;
margin: 0px;
padding: 3px;
}
h4 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: normal;
}
#navi {
list-style:none;
margin:0;
padding:1;
}
#navi li a {
display:block;
padding:4px 0;
text-decoration:none;
color:#FFFFFF;
}
#navi li a:hover {
color:#FFCC00;
background-color: #333333;
}
.titulos {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
background-image: url(../imagenes/fondo_botonera.gif);
text-align: center;
height: 18px;
width: 160px;
margin: 0px;
padding: 0px;
}

scripts.js:

function dsp(loc){
if(document.getElementById){
var foc=loc.firstChild;
foc=loc.firstChild.innerHTML?
loc.firstChild:
loc.firstChild.nextSibling;
foc.innerHTML=foc.innerHTML=='+'?'-':'+';
foc=loc.parentNode.nextSibling.style?
loc.parentNode.nextSibling:
loc.parentNode.nextSibling.nextSibling;
foc.style.display=foc.style.display=='block'?'none ':'block';}}

if(!document.getElementById)
document.write('<style type="text/css"><!--\n'+
'.dspcont{display:block;}\n'+
'//--></style>');

Si Ud observan no me quedan parejas las distancias entre botones, y seguro que es algo que entra en conflicto entre css y el script.

Si alguien encuentra o resuelve el error le agradeceria me lo comente.

[jackruel]

si no usaras listas seria mejor
para dejar espacio hacia abajo por que no intentas usar la etiqueta

Código:

<br>

te funcionaria mejor y deja menos espacio ademas de ahorrarte espacio en tu codigo

bueno asi le hice yo


por cierto tu codigo me sirvio mucho gracias