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!