anyone help with this menu please (CSS)

[dannykilla]

Hi,

I have copied this menu system from a site and I am trying to get it to work on my forum, but the position is completely off and was wondering if someone could me out please?
I am a complete n00b and was hoping someone could help me get this to look like it does in the image I mocked up on photoshop ?
You can see how it looks at the minute here:

http://www.bcguild.eu

here is the CSS that I have used!

/* Positioning */
#nav {
position: absolute;top: 24px;center: 3px;margin: 0;}
#nav ul {margin: 0;padding: 0;}
#nav li {margin: 0;padding: 0;float: left;}
#nav li a {float: left;display: block;}
#nav li a:hover, #nav li a#active, #nav li:hover a, #nav li.iehover a {margin-bottom: 0px;}

#nav li ul {margin: 0;padding: 0;position: absolute;bottom: -23px;left: -8px;list-style: none;display: none;}
#nav li#current ul{display: block;z-index: 50;}
#nav li:hover ul, #nav li.iehover ul{display: block;z-index: 60;}
/* @end */
/* common styling */
#nav ul {list-style: none;text-transform: uppercase;}
#nav ul li {font: normal 12px Arial, Helvetica, sans-serif;}
#nav ul li a {padding: 5px 23px 5px 22px;color: #FFF;text-decoration: none;border-top: 1px solid #4C7CC3;border-bottom: 1px solid #CCC;background: #039 url(../images/nav-bg.png) top right no-repeat;font-weight: bold;letter-spacing:0.45px;}
#nav ul li a:hover,
#nav ul li a#active,
#nav ul li:hover a,
#nav ul li.iehover a {border-top: 1px solid #CB4B4B;border-bottom: 1px solid #A31915;margin-bottom: 0px;background: #A31915 url(../images/nav-current-bg.png) top right no-repeat;}
#nav ul li a.last {background: #039 url(../images/nav-last-bg.png) top right no-repeat;}
#nav ul li a.last:hover,
#nav ul li:hover a.last,
#nav ul li.iehover a.last {border-top: 1px solid #CB4B4B;border-bottom: 1px solid #A31915;margin-bottom: 0px;background: #A31915 url(../images/nav-last-hover.png) top right no-repeat;}
#nav ul li ul {width: 715px;text-transform: none;background-color: transparent;}
#nav ul li ul li a {padding: 6px 8px 5px 8px;text-decoration: none;border: none;background: url(../images/subnav-bg.png) transparent 100% 50% no-repeat;font-weight: bold;font-size: 90%;}
#nav ul li ul{height: 22px;border-bottom: 1px #CCC solid;}
#nav ul li#current ul{background: #A31915;}
#nav ul li:hover ul,
#nav ul li.iehover ul{display: block;z-index: 60;background: #A31915;}
#nav ul li:hover ul li a,
#nav ul li.iehover ul li a,
#nav ul li#current ul li a {padding: 5px 8px 5px 8px;text-decoration: none;border: none;background: url(../images/subnav-bg.png) transparent 100% 50% no-repeat;font-weight: bold;font-size: 90%;}
#nav ul li ul li a:hover,
#nav ul li.iehover ul li a:hover {border: none;color: #FF9;background: url(../images/subnav-bg.png) transparent 100% 50% no-repeat;}
#nav ul li ul li.last a,
#nav ul li ul li.last a:hover,
#nav ul li#current ul li.last a,
#nav ul li.iehover ul li.last a:hover {background: none;}
/* @end */

Thanks
Danny