Menu Vertical desplegable queda abierto

[colote]

Hola Gente, el problema que tengo es que cuando carga la pagina me gustaria que todos las opciones del menu queden cerrados, ya que en la 1° opcion del menu arranca desplegado:

Este Codigo arme para el menu:

Código CSS:

#accordion {
 list-style: none;
 padding: 0 0 0 0;
 width: 200px;
 margin: 15;
 
 }
 
 #accordion div {
 display: block;
 font-weight: bold;
 font-size:11px;
 font:bold 10px sans-serif;
 color:#000000;
 cursor: pointer;
 padding: 10px;
 margin:0;
 background-color: #ffcc66;
 background-position: right center;
 background-repeat:no-repeat;
 border-bottom: 1px solid #eff2f5;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
 
 }
 
 #accordion div:hover {
 background-color: #FF9933;
 font-weight: bold;
 cursor: auto;
 padding: 10px;
 font-size:11px;
 color: #ffffff;
 display:block;
 font-size:12px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
 
 }
 
 
 #accordion ul {
 list-style-type: none;
 display: none;
 background: #999999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
 
 }
 
 #accordion ul li {
 background: #999999;
 font-weight: normal;
 cursor: auto;
 padding: 10px;
 width: 140px;
 height: 15px;
 color: #375d84;
 display:block;
 font:11px sans-serif;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
 
 }
 
 
 #accordion ul li:hover {
 
 background-color: #ffcc55;
 cursor: auto;
 padding: 10px;
 font:11px;
 font-weight: bold;
 color: #375d84;
 display:block;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
 
 }
 #accordion a {
 text-decoration: none;
 color: #000000;
 }
 
  #accordion a:hover{
 text-decoration: none;
  font-weight: bold;
 color: #ffffff;
 }
 

Y asi muestro el mnu:

Código HTML:

<li><div><a href="index.php">:: HOME</a></div>
            <ul>
            <li><a href="compras.php">COMPRAS</a></li>
        </ul>
    
    </li>
    
 
    <li><div>:: ELECTRONICA</div>
        <ul>
            <li><a href="electronica.php">ELECTRO</a></li>
            <li><a href="parlantes.php">PARLANTES</a></li>
            <li><a href="auriculares.php">AURICULARES</a></li>          
        </ul>
    </li>
 
    <li><div><a href="informatica.php">:: INFORMATICA</a></div></li>
 
 
 
    <li><div>:: CELULARES</div>
            <ul>
            <li><a href="celulares.php">EQUIPOS</a></li>
            <li><a href="accesorios.php">ACCESORIOS</a></li>            
        </ul>
    </li>
 

asi es como aparece cuando carga la pagina:

HOME
-----COMPRAS (Esto es lo que no quiero que se vea cuando carga la pagina)
ELECTRONICA
INFORMATICA
CELULARES


Y lo correcto seria asi:
HOME
ELECTRONICA
INFORMATICA
CELULARES


Gracias de antemano.

Saludos, Ricardo.

[pzin]

Tendrás que poner el código completo, porque así tal cual en principio no veo porqué vaya a ocultarse ninguno de los submenus. Vamos, que falta ahí algún elemento #accordion.

Aparte, ¿se supone que se despliegan usando CSS? Porque no veo cómo.

[colote]

ahi descubri lo que hace que se despliegue, es un javascript.
Claro que solo no se despliega es con Jquery, perdon que no lo puse antes.

Aca dejo el Codigo:

Código Javascript:

<script type="text/javascript">
 $("#accordion > li > div").click(function(){
 if(false == $(this).next().is(':visible')) {
 $('#accordion ul').slideUp(300);
 }
 $(this).next().slideToggle(300);
 });
 $('#accordion ul:eq(0)').show();
 </script>
 

[colote]

Y la linea que lo deja abierto es esta:

Código Javascript:

$('#accordion ul:eq(0)').show();
 

la elimine y anda de 10 !!!

Gracias por tu ayuda pzin !!!!