How to make my vertical menu pop up child pages after hovering?

[aquinox]

Hi, I am just playing with my css but cannot get it to work (it is for wordpress so links are dynamically driven)


#sb-container{position:absolute; left:20px; top:348px; list-style: none;}
#sb-container ul {
background-image: -webkit-linear-gradient(top, #2F2727, #1a82f7);
background-image: -moz-linear-gradient(top, #2F2727, #1a82f7);
background-image: -ms-linear-gradient(top, #2F2727, #1a82f7);
background-image: -o-linear-gradient(top, #2F2727, #1a82f7);}

#sb-container ul li {list-style: none; margin: 0; padding: 0; border: none;
background-image: -webkit-linear-gradient(top, #2F2727, #1a82f7);
background-image: -moz-linear-gradient(top, #2F2727, #ABCBFF);
background-image: -ms-linear-gradient(top, #2F2727, #ABCBFF);
background-image: -o-linear-gradient(top, #2F2727, #ABCBFF);}


#sb-container ul a {padding: 10px 10px 10px 12px/; background: #3D59b5;background-position: 10px center; display: block; color: #a0a0ff; border-bottom: 1px solid #7Da9e5; border-top: 1px solid #4695d3; font-family: Verdana, Helvetica , sans-serif ;}
#sb-container ul a:hover {padding: 10px 10px 10px 15px; margin: 0 ;
background-image: -webkit-linear-gradient(top, #2F2727, #1a82f7);
background-image: -moz-linear-gradient(top, #2F2727, #1a82f7);
background-image: -ms-linear-gradient(top, #2F2727, #1a82f7);
background-image: -o-linear-gradient(top, #2F2727, #1a82f7);}
}

#sb-container ul ul a {padding: 10px 10px 10px 25px; display: none;}
#sb-container ul ul a:hover {display: block; position: relative}
</ul>
any tips? (if you see any other things improvable in my css just tell me :)

[Deadweight]

Website example?