Cómo hacer un menú desplegable con CSS

Estoy intentando hacerme un menú con sub menú con css y la verdad que no me sale

Tengo la imagen, el hover, todo. Pero cuando paso el mouse, no se despliegan las opciones.

Alguien puede ayudarme? Gracias

#top{
clear: both;
margin: 10px auto 0;
width: 974px;
padding: 0 43px 0 43px;
height: 57px;
background: url(images/top.png) no-repeat;
}

#top ul, #top li {
float: left;
line-height: 49px;
background: url(images/sep.gif) no-repeat scroll right;

}

#top a{
float: left;
display: block;
margin-right: 2px;
padding: 0 18px 0 15px;
color: #fff;
font-family: 'CardoRegular';
font-size: 13.5px;

}

#top li.current_page_item a, #top li a:hover {
color: #fff;
background: url(images/hover.png) repeat-x;
}

#top ul ul a{
width: 135px;
line-height:40px;
padding:0 20px;
display:block;
}

#top ul li {
position: relative;
float: left;
}

#top ul ul {
position: absolute;
top: -999999px;
left: 0px;
opacity: 0;
background: #fff;
text-align: left;
box-shadow: 2px 2px 0 #b5b5b5;
}

#top ul li:hover>ul{
position: absolute;
top: 100%;
opacity:1;
}

Emmm mira hace poco encontre unos tutos buenisimos en youtube con ctitulo como crear un menu desplegable con css fijate ay muchos y estan clarisimos amigo.

Link youtube

Si esta en el foro me gustaria saberlo es muy copado de claro el tuto

CSS:
#cat-menu {background: url(http://1.bp.blogspot.com/-UVHiFPVwJ5Q/T4Y9Aw8NgNI/AAAAAAAAC8s/lw4XQUhpcvU/s1600/nav+anroid+menu.png) repeat-x; width:980px; height:45px; margin:0 auto; border-top:1px solid #333; border-bottom:3px solid #0094DD;font-family:'oswald', Halvetica, Arial, Sans-serif; }
/* category navigation */
.nav { z-index:99; float:left; margin:0px; padding:0px; list-style:none; line-height:1; height:45px; }
.nav a { position:relative; color:#fff; display:block; z-index:100; text-decoration:none; }
.nav li { float:left; width:auto; }
.nav li a { font-size:13px; padding:0 15px; border-right:1px solid #333; text-decoration:none; line-height:45px; }
.nav li a:hover, .nav li a:active, .nav li.first a { color:#fff; line-height:45px; }
.nav li a:hover {background: url(http://4.bp.blogspot.com/-FZtsPlzLEiE/T0OjMsHsw6I/AAAAAAAACV8/5FV2NT2emnM/s1600/nav-hover+.png) left top repeat-x; text-decoration:none; }
.nav li.current-cat a, .nav li.current-cat-parent a { line-height:45px; }
.nav li.current-cat li a, .nav li li.current-cat a, .nav li.current-cat-parent li a { background:#fff; line-height:30px; border-bottom:none; }
.nav li a.sf-with-ul { }
.nav li ul { background:#333 url() repeat-x; position:absolute; left:-999em; width:178px; margin:0px 0px 0px -1px; border:1px solid #333; border-width:1px 1px 0px; z-index:999; }
.nav li ul li { border-top:1px solid #000; border-bottom:1px solid #333; border-right:none; }
.nav li ul li a {background:#111 url() repeat-x; width:147px; padding:0px 15px; color:#777; font-size:12px; font-weight:normal; border-right:none; line-height:34px; }
.nav li ul li a.sf-with-ul { padding:0 15px; }
.nav li ul li a:hover {color:#fff; text-decoration:none; line-height:34px; border-bottom:none; }
.nav li ul ul { margin:-36px 0px 0px 178px; }
.nav li ul ul li a { }
.nav li ul li ul li a { }
.nav li:hover,.nav li.hover {position:static; }
.nav li:hover ul ul, .nav li.sfhover ul ul,
.nav li:hover ul ul ul, .nav li.sfhover ul ul ul,
.nav li:hover ul ul ul ul, .nav li.sfhover ul ul ul ul { left:-999em; }
.nav li:hover ul, .nav li.sfhover ul,
.nav li li:hover ul, .nav li li.sfhover ul,
.nav li li li:hover ul, .nav li li li.sfhover ul,
.nav li li li li:hover ul, .nav li li li li.sfhover ul { left:auto; }

HTML:
<div id='cat-menu'>
<ul class='nav' id='cat-nav'>
<li class='cat-item cat-item-1'>
<a href='/' title=''>
Principal
</a>
</li>}
<li class='cat-item cat-item-41'>
<a href='/search/label/Creepypasta'>
Creepypastas
</a>
</li>
<li class='cat-item cat-item-42'>
<a href='/search/label/Libros'>
Libros (pdf)
</a>
</li>
<li class='cat-item cat-item-43'>
<a href='/search/label/Deep Web'>
Deep Web
</a>
</li>
<li class='cat-item cat-item-44'>
<a href='/search/label/Historias'>
Historias
</a>
</li>
<li class='cat-item cat-item-45'>
<a href='http://games-site-btemplates4u.blogspot.com/'>
FASHION
</a>
</li>
<li class='cat-item cat-item-46'>
<a href='http://games-site-btemplates4u.blogspot.com/'>
Music
</a>
</li>
<li class='cat-item cat-item-47'>
<a href='http://www.btemplates4u.com/'>
HEALTH
</a>
</li>
<li class='cat-item cat-item-47'>
<a href='http://www.btemplates4u.com/'>
SPORT
</a>
</li>
<li class='cat-item cat-item-47'>
<a href='http://games-site-btemplates4u.blogspot.com/'>
MOVIE
</a>
</li>
<li class='cat-item cat-item-40'>
<a href='#'>
Contacto
</a>
<ul class='children'>
<li class='cat-item cat-item-15'>
<a href='https://www.facebook.com/FernandoAzulcrema.10' target='_blank'>
Facebook
</a>
</li>
<li class='cat-item cat-item-22'>
<a href='http://www.twitter.com/CAcafernandoe' target='_blank'>
Twitter
</a>
</li>
<li class='cat-item cat-item-23'>
<a href='https://plus.google.com/u/0/+MisteriosywebBlogspotMxCE/' target='_blank'>
Google+
</a>
</li>
</ul>
</li>
</ul>
</div>
<!--end #cat-nav-->

Son mis estilos, solo cambia los colores y tamaños

es mucho mas facil de lo que parece simplente le dices a un li:hover > ul {display:block;}, te paso el codigo muy simplificado para que entiendas el concepto y sepas hacer un menu con subitems:

css:
<style>
li > ul{
display:none;
}

li:hover > ul {display:block;}

</style>


html:

<ul>
<li>Menu item 1</li>
<li>
Menu item2
<ul class="submenu"><li>Submenu item 1</li> <li>Submenu item 1</li></ul>

</li>

</ul>


Como dicen los compañeros la red esta llenita de tutos!! Saludos 🙂

Gracias por la ayuda compañero! con todos sus aportes seguro que ya me sale 🙂