extended horizontal nav bar

Right now I have a wordpress theme that has a solid black bar for its main navigation at the very top of the site. How would I go as to make it extended across the whole horizontal axis and with an repeated image over it.

my site is www.ravegrounds.com

i want the nav bar to be like www.threadless.com

/* 2.1 Containers & Columns */
#wrapper { background: url() no-repeat center top; }

.col-left { float: left; }
.col-right { float: right; }
.col-full { width: 940px; margin: 0 auto; }

/* 2.2 Navigation */
.nav { z-index:99; margin:0; padding:0; list-style:none; line-height:1; }
.nav a { position:relative; display:block; z-index:100; }
.nav li { float:left; width: auto; }

#top-nav { font-size: 12px; background: #000; }
#top-nav a { line-height: 50px; color: #939497; border-right: 0px solid #414141; padding: 5px 10px; }
#top-nav a:hover, #top-nav li.current_page_item a, #top-nav li.current_page_parent a { color: #fff; }
#top-nav li ul { background: #000; border: none; }
#top-nav li ul li { background: none; border-top: 1px solid #414141; }
#top-nav li ul li a { line-height: 18px; background: none; border: none; }
#top-nav li a.sf-with-ul { padding-right: 20px; }
#top-nav li ul li a.sf-with-ul { padding:5px 10px; }

#main-nav { font: bold 15px Helvetica, Arial, sans-serif; border: 0px solid #dee3e7; margin-bottom: 40px; background: #fff url() repeat-x left bottom; }
#main-nav li { border-right: 0px solid #dee3e7; }
#main-nav a { padding: 5px 20px 2px; line-height: 30px; color:#555; border-bottom: 4px solid #cacaca; }
#main-nav a:hover, #main-nav li.current_page_item a, #main-nav li.current_page_parent a { border-bottom-color: #dc3e29; color: #000; text-decoration: none; }
#main-nav a:hover, #main-nav li.current-cat a, #main-nav li.current-cat a { border-bottom-color: #dc3e29; color: #000; text-decoration: none; }

#main-nav li ul { background: #FFF; border: 1px solid #dbdbdb; border-width:1px 1px 0; }
#main-nav li ul li { background:#eee; border-top:1px solid #fff; }
#main-nav li ul li a { padding: 0 10px; font-size: 12px; border-bottom: 1px solid #dbdbdb; }
#main-nav li ul li a:hover { border-color: #dbdbdb; background: #dbdbdb; }

/* 2.2.1 Drop-down menus */
.nav li ul { position: absolute; left: -999em; width: 180px; z-index:999; }
.nav li ul li a { width:160px; }
.nav li ul ul { margin: -26px 0 0 180px; }

.nav li:hover,.nav li.hover { position:static; }
.nav li:hover ul ul, .nav li.sfhover ul ul,
.nav li:hover ul ul ul, .nav li.sfhover ul ul ul,
.nav li:hover ul ul ul ul, .nav li.sfhover ul ul ul ul { left:-999em; }
.nav li:hover ul, .nav li.sfhover ul,
.nav li li:hover ul, .nav li li.sfhover ul,
.nav li li li:hover ul, .nav li li li.sfhover ul,
.nav li li li li:hover ul, .nav li li li li.sfhover ul { left:auto; }

.nav .sf-sub-indicator {background: url(images/arrow-superfish.png) no-repeat;position:absolute;display:block;right:0.4em;top:0.9em;width:10px;height:10px;text-indent:-999em;overflow:hidden;}
.nav li ul .sf-sub-indicator {background:url(images/arrow-superfish-right.png) no-repeat;}
#top-nav .sf-sub-indicator { top: 1.2em; }
#top-nav li ul .sf-sub-indicator { top: 0.9em; }
#main-nav .sf-sub-indicator { top: 1.1em; }
#main-nav li ul .sf-sub-indicator { top: 0.9em; }
#top-nav .nav-item-right { float: right}
#top-nav .nav-item-right a {padding-top:8px }

Hello ikidunot,
Right now you style #top-nav with .col-ful which limits it to being 1000px wide.
Move #top-nav out of #wrapper and remove that class,
like this - <div id="top-nav">

<ul class="nav sf-js-enabled">

<li class="page_item current_page_item"><a href="http://ravegrounds.com">Home</a></li>
<li class="page_item page-item-2"><a href="http://ravegrounds.com/?page_id=2" title="About">About</a></li>
<li class="page_item page-item-3"><a href="http://ravegrounds.com/?page_id=3" title="Forums">Forums</a></li>

<li class="nav-item-right"><a href="http://ravegrounds.com/?feed=rss2"><img src="http://ravegrounds.com/wp-content/themes/Spectrum%20v1.0.2/images/ico-rss.png" alt="RSS Feed"></a></li>
</ul><!-- /#nav -->

</div><!-- /#top-nav -->


<div id="wrapper">



<div id="header" class="col-full">

<div id="logo">


Then make your style.css look like this - .nav li { float:left; width: auto; }

#top-nav {
width: 100%;
font-size: 12px;
background: #000;
overflow: auto;
}
#top-nav a { line-height: 50px; color: #939497; border-right: 0px solid #414141; padding: 5px 10px; }
#top-nav a:hover, #top-nav li.current_page_item a, #top-nav li.current_page_parent a { color: #fff; }
#top-nav li ul

When posting code in the forum, please use the code tags, [code][/code] - available with the # button in the post edit window.
This will wrap your code in a scroll box which greatly helps the readability of your post.

That worked perfectly, thank you. I have another question though, in order to get the links back to where they were earlier, which was towards the center of the page, would I have to set absolute positioning for those links?

That worked perfectly, thank you. I have another question though, in order to get the links back to where they were earlier, which was towards the center of the page, would I have to set absolute positioning for those links?

Give your ul.nav a width and position that. No need for absolute positioning.
Try this -
.nav {
width: 1000px;
/*z-index:99; this is not doing anything*/
margin:0 auto;
padding:0;
list-style:none;
line-height:1;
}

Adjust that width to suit.