Error con menu desplegable

Bueno estoy haciendo un menu desplegable y funciona perfecto.... hasta cierto punto

me despliega la primer linea pero no la segunda.... aca les dejo el codigo


index
<!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->
<ul>
<li><a href="#">Ofertas</a></li>
<li><a href="#">Productos</a>
&nbsp;&nbsp;&nbsp;&nbsp;<ul>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a href="#">Producto1</a></li>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a href="#">Producto2</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<ul>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a href="#">Sub1</a></li>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</ul>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
&nbsp;&nbsp;&nbsp;&nbsp;</ul>
</li>
<li><a href="#">Contacto</a></li>
<li><a href="#">Newsletter</a>
&nbsp;&nbsp;&nbsp;&nbsp;<ul>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a href="#">Dar de Alta</a></li>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a href="#">Dar de Baja</a></li>
&nbsp;&nbsp;&nbsp;&nbsp;</ul>
</li>
</ul>
<!--c2--></div><!--ec2-->

css
<!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->
ul {
font-family: Arial, Verdana;
font-size: 15px;
margin:0;
padding:0;
list-style: none;
}


ul li {
margin:0;
padding:0;
display: block;
position: relative;
float:left;

}


li ul {
display: none;
}


ul li a {
&nbsp;&nbsp;display: block;
&nbsp;&nbsp;text-decoration: none;
&nbsp;&nbsp;color: #ffffff;
&nbsp;&nbsp;border-top: 1px solid #ffffff;
&nbsp;&nbsp;padding: 5px 15px 5px 15px;
&nbsp;&nbsp;background: #2C5463;
&nbsp;&nbsp;margin-left: 1px;
&nbsp;&nbsp;white-space: nowrap;
}


ul li a:hover {
background:#FF0066;

}


li:hover ul {
&nbsp;&nbsp;display: block;
&nbsp;&nbsp;
}



li:hover li {
&nbsp;&nbsp;float: none;
&nbsp;&nbsp;font-size: 10px;
&nbsp;&nbsp;
}

li:hover a {
background: #617F8A;

}


li:hover li a:hover {
background:#00FF00;
}
<!--c2--></div><!--ec2-->

ahi no tengo puesta la parte del estilo para el menu q se despliega por segunda vez (es decir sub1 en el ejemplo)


Un abrazo

 

Así sin probarlo, te diría que es justamente porque no tenés puesto el css para el sub1. Tenés que indicar las posiciones donde debe desplegarse.
Te dejo un link a ver si te sirve.
<a href="http://www.chuidiang.com/css/ejemplos/menu_desplegable_css.php" target="_blank">http://www.chuidiang.com/css/ejemplos/menu...legable_css.php</a>

 

no te voy a mentir, sigue sin salirme, mas que nada lo que quiero saber es en donde debo poner el display:block y el display:none

asi deberia ir?

<!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->
<ul>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li>uno</li>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li>dos
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<ul>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <li>dos punto uno</li>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <li>dos punto dos
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <ul>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li>dos punto dos punto tres</li>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </ul>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </ul>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </li>
</ul>
<!--c2--></div><!--ec2-->

y en el css deberia poner

<!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->ul {
font-family: Arial, Verdana;
font-size: 17px;
margin:0;
padding:0;
list-style: none;
}

ul li {
margin:0;
padding:0;
display: block;
position: relative;
float:left;

}

li ul {
display: none;
}



li:hover ul {
&nbsp;&nbsp;display: block;
&nbsp;&nbsp;
}

li > ul > li > ul > li{
display:none;
}

li:hover ul > li > ul > li > ul{
display:block;}<!--c2--></div><!--ec2-->


la verdad me perdi!
estaba pensando en ponerle un class al despliegue a modo de facilitarme las cosas, es decir
<!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1--><li class="desplegable"> jdsalkjdsak </li><!--c2--></div><!--ec2-->
y en el css
<!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->li.desplegable {
display:none;
}

/*Creo que es asi*/
li.desplegable:hover{
display:block;
}<!--c2--></div><!--ec2-->




Otra cosa sobre menu, mientras tanto no pueda resolver el tema del 2do despliegue, me quede probando unas cosas y miren como quedo mi menu <a href="http://www.digitalglobestafe.com.ar" target="_blank">Digital Globe</a> (Usen FireFox, para IE tengo que arreglarlo con el condicional if). Si se fijan, cuando se despliega el menu en la parte de productos, al ser tan largo, se genera la barra de scroll a la derecha de la pagina y me mueve toda la cabecera, ademas, cuando se despliega, se agranda el boton lo cual hace q tambien se mueva la "botonera" por asi decirlo! ya probe muchas cosas.... pero como veran sigue sin andar! alguna idea de lo que puede llegar a ser?

Un abrazo