Problemas con el Menú Horizontal Desplegable!!!!!!!

Muy buenas,
Estoy tratando de hacer un menú horizontal desplegable basado en CSS. Le estoy dando vueltas y vueltas pero no lo consigo. He mirado varios tutoriales en el youtube pero no encuentro el error. No sé qué hago mal.
Alquién me puede ayudar con eso???
Por favor!!!!!!!!!!!!!!!!!!!! :confused:


En fin aquí os dejo el código del Menú:

<div id="navegacion">
<ul>
<li><a href="#">Sección 1</a>
<ul>
<li><a href="#">SubSección 1</a></li>
<li><a href="#">SubSección 2</a></li>
</ul>
</li>
<li><a href="#">Sección 2</a></li>
<li><a href="#">Sección 3</a>
<ul>
<li><a href="#">SubSección 1</a></li>
<li><a href="#">SubSección 2</a></li>
</ul>
</li>
<li><a href="#">Sección 4</a></li>
</ul>
</div>


Y el de la hoja de estilos (CSS):

#navegacion {background-color:#B5B5B5 ;
text-align: center;
border-left:black 1px solid;
border-right:black 1px solid;
height: 20px;
padding-left: 0px;
margin-left: 0px; }

#navegacion ul {list-style: none;
float:left; }

#navegacion li {list-style: none;
float: left;
margin-left: 40px}

#navegacion li a {display: block;
width: 100px;
height: 5px;
text-decoration: none; }

#navegacion li ul li {list-style: none;
display: none;
float: none;
position: relative; }

#navegacion li ul li a {display: block;
width: 100px;
margin-bottom: 4px;
margin-top: 4px; }

#navegacion li:hover ul {display: block }


Muchísimas gracias [:)]