Menu despegable CSS

[Tecktonikrazy]

Hola, tengo el siguiente menu css:

Código CSS:

#menu ul {
padding: 0px;
margin: 0px;
background: url(imagen.jpg) repeat-x;
font-size: 14px;
font-weight: bold;
width: 100%;
float: left;
font-family:"Trebuchet MS", Tahoma, Verdana, Helvetica, Arial;
}
 
 
#menu ul li {
display: inline;
}
 
#menu ul li a:link, #menu ul li a:visited {
background: url(imagen.jpg) left top 
 
no-repeat;
color: #FFF;
padding-left:50px;
float: left;
text-decoration: none;
display:block;
margin:0 0px;
}
 
#menu ul li a span{
padding:10px 50px 10px 0;
line-height:24px;
display:block;
background: url(imagen.jpg) right top 
 
no-repeat;
}
 
#menu ul li a:hover, #menu ul li a:active{
color: #FFF;
background: url(imagen.jpg) left bottom 
 
no-repeat;
}
 
#menu ul li a:hover span, #menu ul li a:active span{
background: url(imagen.jpg) right bottom 
 
no-repeat;
}
 

Eso va en el Head, y cada vez que quiero poner un nuevo enlace con ese menu utilizo:

Código HTML:

<div id="menu">
            <ul>
                <li>
                    <a href="/home"><span>HOME</span></a>
                </li>

                <li>
                    <a href="/news"><span>NEWS</span></a>
                </li>

                <li>
                    <a href="/imagenes"><span>IMAGENES</span></a>
                </li>
            </ul>
        </div> 

Funciona a la perfeccion, pero lo que quiro saber es como hago para que al pasar el mouse por el de "IMAGENES" por ejemplo, aparesca un submenu despegable vertical con subpaginas o categorias, no quiero ningun efecto al desplegarse ni nada, solo lo mas basico y poderle cambiar el color de fondo, no se nada de css, ese menu lo saque de un tutorial xD bueno espero que me puedan ayudar