Problemilla con menú <ul>

[paskuini]

Hola, agradeceria si alguien me puede ayudar con el siguiente problema que me surgió.
Es el primer menú que hago con listas, y la verdad es que a ratos se me resisten un poco los estilos.... por no decir que las compatibilidades de exploradores me llevan de cabeza . bueno, ahí va el código:

Código HTML:

<style type="text/css">
body { 
     margin:0; 
     padding:0; 
     font-family:Verdana, Geneva, sans-serif;  
     font-size:0.9em; font-family:"kozgopro-extralight"; src: url('kozgopro-extralight.otf') format(“opentype”);  
     }
ul.menu {  
     list-style:none;  
     margin:0;  
     padding:0;  
     position:absolute;  
     top:117px;  
     }
ul.menu ul {  
     display:none;  
     }
ul.menu li {  
     display:block;  
     width:150px;  
     height:30px;  
     background:white;  
     padding:5px;  
     padding-left:15px;  
     list-style:none; 
     }
ul.menu li:hover {  
     background:rgb(238,191,236);  
     width:150px;  
     border-right:2px solid rgb(186,0,181);  
     }
ul.menu li:hover >ul {  
     display:block;  
     position:relative;  
     top:-23px;  
     left:117px; 
     }
</style>
<ul class="menu">
    <li>Producto1</li>
    <li>Producto2</li>
    <li>Producto3
        <ul><li>Productos especiales
                <ul><li>lista de Productos especiales
                        <ul><li>1</li>
                            <li>2</li>
                            <li>3</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul> 

Bueno, el asunto es que cuando hago el :hover sobre <li>lista de Productos especiales, el menú se me desplega desplazado hacia abajo debido a que el texto supera el ancho del <li>; y queda muy antiestético.
Alguien podria echarme una manita con este asunto? jeje de nuevo, gracias!

[saul123]

Hola

Encontre esta solución espero que te sirva .

Código HTML:

<style type="text/css">
body { 
     margin:0; 
     padding:0; 
     font-family:Verdana, Geneva, sans-serif;  
     font-size:0.9em; font-family:"kozgopro-extralight"; src: url('kozgopro-extralight.otf') format(“opentype”);  
     }
#menu {  
     list-style:none;  
     margin:0;  
     padding:0;  
     position:absolute;  
     top:117px;  
     }
#menu ul {  
     display:none;  
     }
#menu li {  
     display:block;  
     width:150px;  
     height:30px;  
     background:white;  
     padding:5px;  
     padding-left:15px;  
     list-style:none; 
     margin-top:3px;
     }
#menu li:hover {  
     background:rgb(238,191,236);  
     width:150px;  
      height:30px; 
     border-right:2px solid rgb(186,0,181);  
     }
#menu li:hover >ul {  
     display:block;  
     position:relative;  
     top:-23px;  
     left:117px; 
     }
#lista  li{  
     display:block;  
     width:200px;  
     height:30px;  
     background:white ;  
     padding:5px;  
     padding-left:15px;
     padding-right:10px;
     list-style:none;
     }
#lista li:hover {  
     background:rgb(238,191,236);  
     width:180px;  
     border-right:2px solid rgb(186,0,181);  
      padding-right:10px;
 
     }
     #lista li:hover >ul {  
     display:block;  
     position:relative;  
     top:-23px;  
     left:152px; 
     }
    #lista2  li{  
     display:block;  
     width:50px;  
     height:30px;  
     background:white ;  
     padding:5px;  
     padding-left:15px;
     padding-right:10px;
     list-style:none; 
     }
#lista2 li:hover {  
     background:rgb(238,191,236);  
     width:50px;  
     border-right:2px solid rgb(186,0,181);  
      padding-right:10px;
     }
</style>
<ul id="menu">
    <li>Producto1</li>
    <li>Producto2</li>
    <li>Producto3
        <ul ><li>Productos especiales
                <ul id="lista" ><li >lista de Productos especiales
                        <ul id="lista2"><li>1</li>
                            <li>2</li>
                            <li>3</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
 

[paskuini]

pues no, mas al contrario, me manda el css a hacer puñetas
además que el añadir una clase más no me hace mucha gracia... la idea era crear el css y tener luego los menús "predefinidos"... es decir; sólo hacer la lista con class="menu" y listo..
gracias de todas formas