WordPress css drop down sub menu

Hello,

I am currently making a theme for WordPress, and am trying to use CSS to make a sub-menu of a wordpress menu to drop down on hovering over the parent li.

I’ve got it to work but it’s displaying horizontally and I need it to drop down vertically:

[url]http://www.berryconcept.co.uk/sandbox/[/url]

The css for the whole menu is as follows:

[CODE].menu-main-nav-container{
margin:auto;
width:950px;
background-color: #333;
padding-top: 12px;
padding-bottom: 12px;
}

.menu-main-nav-container li {
display: inline;
list-style-type: none;
}

.menu-main-nav-container ul {
padding-left: 0;
margin:0;
}

.menu-main-nav-container li a{
padding-top:12px;
padding-bottom:12px;
padding-right: 25px;
padding-left:25px;
text-decoration:none;
font-weight:bold;
font-family:”Lucida Grande”, “Lucida Sans Unicode”, sans-serif;
color:#fff;
}
.menu-main-nav-container li a:hover{
color:#fff;
background-color:#999;
}

.menu{
list-style-type:none;
padding-left:0px;
}

ul.sub-menu {
display:none;
}

#menu-main-nav li:hover ul.sub-menu
{
display: block;
position: absolute;
font-size: 12px;
padding-top: 3px;
}[/CODE]

Any help would really be appreciated, thanks ?

Also in #CSS _↴