CSS Navigation Matching Help

I have started to use the PyroCMS CMS and by default the CMS does its code like this:

[CODE]
<li class=”first current”>
<a href=”http://example.com/home”>Home</a>
</li>
<li class=””>
<a href=”http://example.com/about-us”>About Us</a>
<ul>
<li class=”first”>
<a href=”http://example.com/contact”>Contact</a>
</li>
<li class=”last”>
<a href=”http://example.com/staff”>Staff</a>
<ul>
<li class=”single”>
<a href=”http://example.com/history”>History</a>
</li>
</ul>
</li>
</ul>
</li>
<li class=”last”>
<a href=”http://example.com/blog”>Blog</a>
</li>
[/CODE]

I have tried many variations of my css code but I cannot get my current style to replicate the above CMS style -> The above style is dynamically outputted by PHP.

I do not require a current link.

What are you having trouble with specifically?

I am having trouble with the general css and formatting

The above code is how the CMS replicates there navigation menus, the code below is how I have done mine and I am currently turning my HTML/CSS into a theme but I have tried many combinations and I cant seem to get it right.

[B]My CSS: [/B]

[CODE]

/* Main Menu */

#mainMenu{
height:50px;
margin:0 0 15px 0px;
background-color:#6a6a6a;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}

#mainMenu ul{
display:inline;
-webkit-border-bottom-right-radius:2px;
-webkit-border-bottom-left-radius:2px;
-moz-border-radius-bottomright:2px;
-moz-border-radius-bottomleft:2px;
}

#mainMenu ul li{
margin-left:0px;
width:120px;
height:56px;
display:inline;
position:relative;
}

#mainMenu li a {
float:left;
display:block;
text-decoration:none;
width:120px;
height:35px;
font-size:13px;
line-height:45px;
text-align:center;
color:#fff;
text-transform:uppercase;
padding-top:-4px;
margin:0px;
}

#mainMenu li a:hover, #mainMenu li a:active{
text-decoration:none;
background-color:#7a7a7a;
color:#fff;
width:120px;
height:50px;
-webkit-border-top-left-radius:2px;
-webkit-border-bottom-left-radius:2px;
-moz-border-radius-topleft:2px;
-moz-border-radius-topleft:2px;
}

#mainMenu .signup{
background-color:#69c21c;
height:50px;
margin-left:360px;
-webkit-border-top-right-radius:2px;
-webkit-border-bottom-right-radius:2px;
-moz-border-radius-topright:2px;
-moz-border-radius-bottomright:2px;
}

#mainMenu .signup:hover{
background-color:#00afd8;
}

/*mainMenu Sub Menu */

#mainMenu ul li ul .single{

display:none;
background-color:#7a7a7a;
}

#mainMenu ul li:hover ul{
text-transform:none;
display:block;
position:absolute;
width:115px;
top:50px;
right:-37px;
}

#mainMenu ul li:hover ul a{
float:left;
margin:0 0 0 -35px;
line-height:35px;
width:150px;
height:35px;
border:none;
font-size:12px;
text-align:left;
text-transform:none;

}

#mainMenu ul li ul li a:hover{
width:152px;
height:30px;
font-weight:bold;
margin-left:-38px;
line-height:35px;
}
[/CODE]

Also in #CSS _↴