Menu desplegable CSS

[Pury]

Hola, tengo un problema haciendo un desplegable en un menu ya hecho.
Tengo el siguiente codigo:

Código CSS:

#header #navigation {
    width: 1000px;
    clear: both;
    float: none;
    overflow: hidden;
    background-image: url(navigati.jpg);
    background-repeat: repeat-x;
    background-position: right bottom;
    padding-bottom: 7px;
}
#header #navigation li {
}
#header #navigation li a {
    text-decoration: none;
    color: #E4E4E4;
    background-image: url(navigatj.jpg);
    background-repeat: no-repeat;
    background-position: 0 -120px;
    padding-right: 25px;
    padding-left: 25px;
    margin-top: 13px;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 12px;
    height: 26px;
    padding-top: 4px;
    text-shadow: 1px 1px #444;
    white-space: nowrap;
    display: block;
    float: left;
}
#header #navigation li a:hover {
    text-decoration: none;
    color: #FFF;
    background-position: 0 0;
    height: 25px;
    padding-top: 5px;
}
#header #navigation li.end {
}
#header #navigation li.end a {
    background-image: url(navigati.png);
    height: 30px;
    background-position: 0px 0px;
    font-size: 14px;
    padding-top: 13px;
    margin-top: 0px;
    width: 256px;
    padding-right: 0px;
    padding-left: 0px;
    text-align: center;
    color: #FCE9EA;
    text-shadow: 1px 1px #8D1018;
}
#header #navigation li.end a:hover {
    background-position: -256px 0px;
    height: 29px;
    padding-top: 14px;
}
 

Eso anda bien, es un menu simple sin desplegable, pero al querer agregarle el desplegable no anda, es decir el menu simple sigue andando bien pero el desplegable no se ve, lo que le agregue fue esto:

Código CSS:

#header #navigation ul {
    display: none; 
    background: #cac99e;
    padding: 5px 0;
    position: absolute; 
    margin: 42px -125px;
}
#header #navigation ul:hover {
    display: block;
}
 

El codigo HTML es este:

Código HTML:

<ul id="navigation">
   <li><a href="index.html">Inicio</a></li>
   <li><a href="servicios.html">Servicios</a>
      <ul>
         <li><a href="serv1.html">Servicio 1</a></li>
      </ul>
   </li>
   <li><a href="contacto.php">Contacto</a></li>
</ul>
 

Debe ser alguna tonteria, pero no se mucho de CSS, y esto es lo unico que quiero hacer por ahora, se que hay muchos tutoriales pero no puedo implementarlo en este caso... cuando disponga de mas tiempo aprendere mas, pero por el momento alguien me puede echar una maano? se lo agradeceria mucho!

gracias desde ya, saludos