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>
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.

My CSS:
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;
    }