Combing a menu with rounderd corners with a drop down menu

[Wisdom]

So i have this menu with rounded corners:

http://nutepriveste.openphpbb.com/h10-rounded

But I would to it a dropdown, like this:

http://nutepriveste.openphpbb.com/h9-dropdown

It is simple, no javascript or such. I tried myself but I not sure what I'm doing..

[Wisdom]

Bringing up my post

[Wisdom]

Bringing up my post 2nd time

[themuddfamily]

i started combining them heres how i got on
(sorry i couldnt finish)
<style>


ul.top-nav {
font-family: Times New Roman;
list-style:none outside none;
margin:0;
padding:0px 0 0;
}
.top-nav li {
float:left;
padding:0 5px 0 0;
}
.top-nav li a {
background:url(http://i62.servimg.com/u/f62/13/82/91/72/dreapt13.png) no-repeat scroll 100% 0 transparent;
color:#FFFFFF;
float:left;
font-size: 12px;
padding:0 6px 0 0;
text-shadow: 0px 1px 0px #333333;
}
.top-nav li a span {
background:url(http://i62.servimg.com/u/f62/13/82/91/72/stanga17.png) no-repeat scroll 0 0 transparent;
cursorointer;
float:left;
height:17px;
padding:6px 2px 3px 8px;
}

.top-nav li a:hover {
background-position:100% -26px;
color:#FFFFFF;
text-decoration: none;
text-shadow: 0px -1px 0px #193e75;}

.top-nav li a:active{
text-decoration: none;}

.top-nav li.active a {
background-position:100% -26px;
color:#FFFFFF;
text-decoration:none;
}
.top-nav li.active a:hover {
background-position:100% -26px;
color:#FFFFFF;
text-decoration: none;
}
.top-nav li a:hover span {
background-position:0 -26px;
}
.top-nav li.active a span, .top-nav li.active a:hover span {
background-position:0 -26px;
}



a{text-decoration: none;}

ul#nav {
background: url("http://www.brusheezy.com//images/brusheezy/separ01.gif") no-repeat scroll 100% 50% transparent;
float: left;
list-style: none outside none;
margin: 0;
padding: 0 2px 0 0;
}
#nav li {
background: url("http://www.brusheezy.com//images/brusheezy/separ01.gif") no-repeat scroll 0 2px transparent;
float: left;
padding: 0 0 0 2px;
position: relative;
}
#nav li a {
color: #0A3C74;
float: left;
line-height: 1.125em;
padding: 0 14px;
position: relative;
}
#nav li a span {
cursor: pointer;
float: left;
height: 29px;
padding: 13px 0 0;
position: relative;
z-index: 2;
}
#nav li a em {
color: white;
font-style: normal;
left: 14px;
position: absolute;
top: 14px;
z-index: 1;
}
#nav ul {
background: none repeat scroll 0 0 white;
border-bottom: 2px solid #7595B4;
border-left: 1px solid #BDD0DF;
border-right: 2px solid #7595B4;
display: none;
left: 0;
list-style: none outside none;
margin: 0;
padding: 9px;
position: absolute;
top: 41px;
width: 122px;
}
#nav li li {
background: none repeat scroll 0 0 transparent;
border-bottom: 1px solid #BDD0DF;
font-size: 0.9em;
padding: 0;
width: 100%;
}
#nav li li.first {
border-top: 1px solid #BDD0DF;
}
#nav li li a {
padding: 8px 7px;
width: 108px;
}
#nav li li a span {
cursor: pointer;
float: left;
height: auto;
padding: 0;
position: relative;
z-index: 2;

#nav li:hover, #nav li.hover, #nav li.active {
padding: 0 0 0 1px;
}
#nav li:hover ul, #nav li.hover ul {
display: block;

#nav li a.with-arrow span {
background: url("http://www.brusheezy.com//images/brusheezy/ico-arrow1.gif") no-repeat scroll 100% 20px transparent;
padding: 13px 25px 0 0;

}
#nav li:hover li a, #nav li.hover li a, #nav li.active li a {
background: none repeat scroll 0 0 transparent;
color: #0A3C74;
padding: 8px 7px;
}
#nav li:hover li:hover, #nav li.hover li.hover {
padding: 0;
}
#nav li:hover li:hover a, #nav li.hover li.hover a {
background: none repeat scroll 0 0 #F0F3F6;
color: #3F86CA;
}
#nav li:hover li a span, #nav li.hover li a span, #nav li:hover li:hover a span, #nav li.hover li.hover a span {
background: none repeat scroll 0 0 transparent;
padding: 0;
}

</style>