Menu 3 niveles

[Manuellama]

/*====== Menu Desplegable ========*/
ul#menu li{
list-style:none;
display:inline-block;
margin:0;
padding:0;

list-style-type: none;
float: left;
/*text-transform: uppercase;*/
font-size: 15px;

font-weight: bold; /*Esto te genera una especie de cuadro donde se encierra al texto, ent. debo usar PADDING, para darle las distancias al DIV "contenedor".*/
text-align:justify;
/*line-height: 20px;*/
margin-left:10px;
padding-top:10px;
padding-right: 5px;
position: relative;
}

ul#menu li a {/*Propiedades de los hipervinculos asociados a la lista*/
text-decoration: none;
color: red;/*#222;*/
position: relative;
}

/*=== Segundo nivel del menu ===*/

ul#menu li ul {/*Empieza segundo nivel*/
display: none;
}

ul#menu li:hover ul{
background: red;
display: block;
position:absolute;/*Muy importamte*/
padding: 0px;
text-align: left;
}

ul#menu li:hover ul li{
float:none;
display: block;
font-weight: bold;
background: red;
width: 190%;/*es el ancho del menu desplegable*/
}

ul#menu li ul li a{/*Termina segundo nivel*/
color: white;
}

/*=== Tercer nivel del menu ===*/

ul#menu li ul li ul{/*Empieza tercer nivel*/
position:relative;
visibility:hidden;
}

ul#menu li ul li:hover ul{
background-position:bottom;
display: block;
background: black;
position:absolute;/*Muy importamte*/
padding: 0px;
text-align: left;
visibility:visible;

}

ul#menu li:hover ul li:hover ul{
display: block;
top:0;
left:100%;
}

ul#menu li ul li ul li a{
color: gray ;
}

ul#menu li:hover ul li:hover ul li a{/*Termina tercer nivel
color: black;


Cambia el css por este...

La parte nueva es esta:


ul#menu li ul li ul{/*Empieza tercer nivel*/
position:relative;
visibility:hidden;
}

ul#menu li ul li:hover ul{
background-position:bottom;
display: block;
background: black;
position:absolute;/*Muy importamte*/
padding: 0px;
text-align: left;
visibility:visible;

}

Cambia la visibility.