Problems with dropdown menu

Hi everybody,
I am trying to figure out how to get a good dropdownmenu witht the simplicityX template.
I have tried a lot and read a lot but I can’t seem to figure out how to get it right. I think it is a CSS issue and I must admit I am not strong in that. After trying all day, maybe somebody can help me?
Here is the CSS code that has to do with the menu:

/* menubar */
.nav{
height:40px;
background-color:#222;
color:#fff;
width:880px;
margin:auto;
text-align:left;
font-size:11px;
cursor:default;
}
.nav2{
height:40px;
}
#slogan{
position:absolute;
margin:11px 0px 0px 15px;
font-size:14px;
}
#navdiv{
text-align:right;
}
#navlist{
list-style-type:none;
margin:0px;
padding:13px 8px 0px 0px;
}
#navlist li{
display:inline;
}
#navlist li a{
color:#fff;
font-weight:bold;
text-decoration:none;
height:40px;
padding:8px 6px 9px 6px;
}
#navlist li a:hover{
color:#bfbfbf;
/* other thoughts
border-top:5px solid #fff;
color:#df521b;
*/
}

I did change the sympTopNav and when I tried that, that did work.
This was the code:

<ul id="nav">

<li><a href="index.php?id=1">Home</a></li>

<li><a href="index.php?id=15">Prijzen</a>

<ul>
<li><a href="index.php?id=16">LP op CD</a></li>
<li><a href="index.php?id=22">Video op DVD</a></li>
<li><a href="index.php?id=14">Webdesign</a></li>
<li><a href="index.php?id=24">HI8 op DVD</a></li>
</ul>

</li>

<li><a href="index.php?id=33">Links</a>
<li><a href="index.php?id=39">Templates</a>

<ul>
<li><a href="index.php?id=44">MODxHost</a></li>
<li><a href="index.php?id=42">MODx CSSWide</a></li>
<li><a href="index.php?id=43">MODx CSS</a></li>
</ul>

</li>

<li><a href="index.php?id=6">Contact</a>

</ul>
</li>
</ul>

My question is: how do I modify the CSS from the menu so that I get the right dropdownmenu?

I also tried some Wayfinder code, but can’t figure out what to place and where to place it, so I think changing the Menu CSS is the easiest way to do it.
By the way this is my modx site now, without the dropdownmenu:
http://www.jomedio.nl/modx/index.php?id=1

I got the dropdown to work, but the original black backgrond of the menu is gone and also the little white space between the header and the menu.
I know this is a CSS issue and maybe here not at the right place, but maybe somebody is willing to help me with it?
This is the CSS file:

body{
margin:0px;
padding:0px;
background:#222 url(images/bodybg.png) repeat-x fixed top center;
text-align:center;
font:11px Verdana,Arial,Helvetica,sans-serif;
}
#container{
width:900px;
margin:auto;
padding-bottom:20px;
}

/* basic styles */
h1,h2,h3,h4,h5,h6{
font-family:Georgia,Verdana,Arial,Helvetica,sans-serif;
font-weight:lighter;
margin:10px 0px 0px 0px;
color:#222;
}
h1{
font-size:28px;
}
h2{
font-size:25px;
color:#0a294f;
}
h3{
font-size:22px;
color:#202f0f;
}
h4{
font-size:18px;
color:#911322;
}
h5{
font-size:16px;
color:#af3d0a;
}
h6{
font-size:11px;
font-weight:bold;
color:#222;
}
del{
color:#999;
}
acronym{
/*border-bottom:1px dotted #222;*/
border:none;
background:url(images/dottedborder_dark.gif) repeat-x bottom center;
padding-bottom:1px;
cursor:help;
}
hr{
width:100%;
border:0;
margin:5px 0px !important;
margin:2px 0px 5px 0px;
height:1px;
color:#777;
background-color:#777;
}
a{
color:#af2639;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
p{
line-height:22px;
margin:5px 0px 15px 0px;
/*text-align:justify;*/
}
.noborder{
border:0;
}
#content ul{
margin:0px;
padding:0px 10px 5px 15px;
list-style-type:none;
}
#content ol{
margin:0px;
padding:0px 10px 5px 33px;
}
#content ul li{
padding-bottom:7px;
background:transparent url(images/arrow.gif) no-repeat 0px 5px;
padding-left:10px;
}
#content ol li{
padding-bottom:7px;
}
#content ul li ul{
margin:8px 0px -7px 0px;
}
/* I can’t get <pre> to display inline very well so just use <span class="pre"> */
#content .pre{
font:11px "Courier New",Courier,sans-serif;
color:#af454a;
}

img{
border:none;
}
img.floatright,
img.floatleft,
#left img{
border:1px solid #222;
}
a:hover img.floatright,
a:hover img.floatleft,
#left a:hover img{
border:1px solid #af2639;
}

/* floats, positioning, and widths */
.floatleft{
float:left;
}
.floatright{
float:right;
}
.w50{
width:50%;
}
.floatleft p{
padding:0px 10px 0px 0px;
}
.floatright p{
padding:0px 0px 0px 10px;
}
img.floatleft{
margin:15px 15px 5px 0px;
}
img.floatright{
margin:15px 0px 5px 15px;
}

/* rounded corners */
.tl{background:#222 url(images/corners/tl.gif) no-repeat top left;}
.tr{background:transparent url(images/corners/tr.gif) no-repeat top right;}
.br{background:transparent url(images/corners/br.gif) no-repeat bottom right;}
.bl{background:transparent url(images/corners/bl.gif) no-repeat bottom left;}

.ltl{background:#efefef url(images/corners/l_tl.gif) no-repeat top left;}
.ltr{background:transparent url(images/corners/l_tr.gif) no-repeat top right;}
.lbr{background:transparent url(images/corners/l_br.gif) no-repeat bottom right;}
.lbl{background:transparent url(images/corners/l_bl.gif) no-repeat bottom left;}

/* blockquotes and code*/
blockquote{
min-height:35px;
width:100%;
display:block;
margin:10px auto;
background:transparent url(images/blockquote/quote.gif) no-repeat 10px 10px;
}
* html blockquote{
min-height:35px;
height:auto !important;
height:35px;
}
blockquote p{
margin:0px;
line-height:17px;
padding:10px 10px 10px 50px;
}
blockquote span{
color:#999;
font-size:9px;
padding-top:5px;
display:block;
}
blockquote span a{
color:#555;
text-decoration:none;
}
blockquote span a:hover{
text-decoration:underline;
}
blockquote.go{
background:transparent url(images/blockquote/go.gif) no-repeat 10px 50%;
}
blockquote.stop{
background:transparent url(images/blockquote/stop.gif) no-repeat 11px 50%;
}
blockquote.exclamation{
background:transparent url(images/blockquote/exclamation.gif) no-repeat 23px 50%;
}
code{
display:block;
width:92%;
margin:0px auto 15px auto;
line-height:17px;
}
code .red{
color:#af454a;
}

/* forms */
form select,
form input,
form textarea{
font:11px Verdana,Arial,Helvetica,sans-serif;
border:1px solid #888;
}
form input:hover,
form input:focus,
form textarea:hover,
form textarea:focus,
form select:hover,
form select:focus{
background-color:#f9f9f9;
/*border:1px dotted #888; optional thought */
border:1px solid #444;
}
form select{
padding:1px;
}
form input{
padding:1px;
}
form label{
display:block;
color:#777
}
form textarea{
padding:1px;
line-height:16px;
}
form p{
margin:10px 0px;
}

/* top section */
#top{
background:url(images/contentbg.gif) repeat-y top center;
}

/* very bottom curve */
#bottom{
background:url(images/container_b.gif) no-repeat bottom center;
height:9px;
}
* html #bottom{
margin-top:-4px;
}

/* header */
#header{
font:30px Georgia,Verdana,Arial,Helvetica,sans-serif;
width:880px;
height:175px;
margin:auto;
background:url(images/headers/h1.jpg) no-repeat top center;
text-align:left;
}
#title{
margin-top:130px;
margin-left:13px;
position:absolute;
color:#fff;
background-color:transparent;
cursor:default;
}

/* menubar */
.nav{
height:40px;
background-color:#222;
color:#fff;
width:880px;
margin:auto;
text-align:left;
font-size:11px;
cursor:default;
}
.nav2{
height:40px;
}
#slogan{
position:absolute;
margin:11px 0px 0px 15px;
font-size:14px;
}
#navdiv{
text-align:right;
}
#navlist{
list-style-type:none;
margin:0px;
padding:13px 8px 0px 0px;
}
#navlist li{
display:inline;
}
#navlist li a{
color:#fff;
font-weight:bold;
text-decoration:none;
height:40px;
padding:8px 6px 9px 6px;
}
#navlist li a:hover{
color:#bfbfbf;
/* other thoughts
border-top:5px solid #fff;
color:#df521b;
*/
}

/* content */
#content{
min-height:400px;
width:880px;
margin:auto;
color:#222;
text-align:left;
}
* html #content{
min-height:400px;
height:auto !important;
height:400px;
}
#left{
width:840px;
float:left;
padding:10px 10px 20px 10px;
}
* html #left{
padding-top:20px;
}

/* sidebar */
#right{
width:190px;
float:right;
padding:20px 10px 20px 20px;
}
* html #right{
padding-top:30px;
}
#right .sideitem{
margin-bottom:25px;
}
#right .sideitem h4{
font:12px Georgia,Arial,Helvetica,sans-serif;
font-weight:bold;
color:#222;
width:100%;
background:#fff url(images/dottedborder.gif) repeat-x bottom center;
padding-bottom:3px;
margin-bottom:13px;
}
#right .sideitem b{
/*display:block;*/
}
#right .sideitem p{
padding:0px 5px;
}
#right .sideitem ul{
margin-left:-4px;
}

/* footer */
.footer{
height:30px;
width:880px;
margin:auto;
color:#fff;
text-align:left;
clear:both;
}
.footer div{
height:30px;
}
#copyright{
text-align:left;
float:left;
padding:8px;
margin-top:0px !important;
margin-bottom:-16px;
}
#designcredit{
float:right;
text-align:right;
padding:8px;
margin-bottom:-16px;
}
#designcredit a{
color:#9f9f9f;
}
#designcredit a:hover{
color:#cf262d;
text-decoration:none;
}

http://www.jomedio.nl/modx/index.php?id=1