Really Need help with my Navigation bar!!

I know how to use CSS, but im not very good at it..

i want to make my navigational bar look good, but i cant get it to.

My website is http://www.motorbikecentral.com
another reason i cant get it to look good is becuase alot of my site is white... if you also have some ideas about making the header bar better feel free to tell me .
also i dont want to copy them but i want mine to look something like this http://www.motoonline.com.au/
This is the code for the bar

<!-- This is the Nav menu file -->


<table border="0" align="center" width="80%" cellspacing="0">
<tr>
    <td>
        <img src="menuvertline.gif" style="vertical-align:bottom" width="100%" height="2.5">
    </td>
</tr>
<tr>
    <td>
    
    <ul id="menu">
        <li><a href="http://www.motorbikecentral.com/index.php">Main Page&nbsp;&nbsp;&nbsp;<img src="menuvertline.gif" width="2" height="12.5"></a></li>
        <li><a href="">&nbsp;&nbsp;&nbsp;Off Road&nbsp;&nbsp;&nbsp;<img src="menuvertline.gif" width="2" height="12.5"></a>
            <ul>
                <li><a href="http://www.motorbikecentral.com/Off Road/Bio.php">Off Road Bike Specs</a></li>
                <li><a href="http://www.motorbikecentral.com/Off Road/Dealers.php">Off Road Dealers</a></li>
                <li><a href="http://www.motorbikecentral.com/Off Road/Tracks.php">Off Road Tracks</a></li>
            </ul>
        </li>
        <li><a href="">&nbsp;&nbsp;&nbsp;Interviews&nbsp;&nbsp;&nbsp;<img src="menuvertline.gif" width="2" height="12.5"></a>
            <ul>
                <li><a href="http://www.motorbikecentral.com/Interviews/Interviews.php">Interviews</a></li>
            </ul>
        </li>
        <li><a href="">&nbsp;&nbsp;&nbsp;Race Reviews&nbsp;&nbsp;&nbsp;<img src="menuvertline.gif" width="2" height="12.5"></a>
            <ul>
                <li><a href="http://www.motorbikecentral.com/Race_Reviews/Supercross_Race_Reviews.php">Supercross Race Reviews</a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
            </ul>
        </li>
        <!--<li><a href="">&nbsp;How To&nbsp;<img src="menuvertline.gif" width="2" height="12.5"></a>
            <ul>
                <li><a href="http://www.motorbikecentral.com/How To - Bike Rebuild.php">Bike Rebuild</a></li>
            </ul>
        </li>-->
        <!--<li><a href="">&nbsp;Gear Reviews&nbsp;<img src="menuvertline.gif" width="2" height="12.5"></a>
            <ul>
                <li><a href="http://www.motorbikecentral.com/??.php">??</a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
            </ul>
        </li>-->
        <!--<li><a href="http://www.motorbikecentral.com/blog">&nbsp;Blog&nbsp;<img src="menuvertline.gif" width="2" height="12.5"></a></li>-->
        <!--<li><a href="http://www.motorbikecentral.com/Street Bike.html">Street Bike</a></li>--> 
        <!--<li><a href="http://motorbikecentral.com/Forum/">Forum</a></li>-->
        <li><a href="">&nbsp;&nbsp;&nbsp;Blogs&nbsp;&nbsp;&nbsp;<img src="menuvertline.gif" width="2" height="12.5">
            <ul>
                <li><a href="http://www.motorbikecentral.com/Blogs/Kurts_Blog.php">Kurts Blog</a></li>
                <li><a href="http://www.motorbikecentral.com/Blogs/Camerons_Blog.php">Camerons Blog</a></li>
            </ul>
        </li>
        <li><a href="">&nbsp;&nbsp;&nbsp;Business&nbsp;&nbsp;&nbsp;<img src="menuvertline.gif" width="2" height="12.5">
            <ul>
                <li><a href="http://www.motorbikecentral.com/About Us.php">About Us</a></li>
                <li><a href="http://www.motorbikecentral.com/Contact Us.php">Contact Us</a></li>
            </ul>
        </li>
    </ul>
</td>
</tr>
<tr>
    <td>
        <img src="menuvertline.gif" style="vertical-align:top" width="100%" height="2.5">
    </td>
</tr>
<tr>
    
    <?php //include_once('sitemessage.php'); ?>
    </td>
</tr>
</table>

PHP:

and this is the css im using

#menu,
#menu ul {
    list-style: none;
}
#menu {
    padding:0;
    margin:0;
}

#menu > li {
    float: left;
}
#menu li a {
    width:100%;
    height: 100%;
    text-decoration:none;
    text-align: center;
    line-height: 30px;
    background-color: white;
    color: black;
    font:bold 15px Arial;
}
#menu ul {
    padding: 2px 0px 2px 0px;
    margin:0;
    position: absolute;
    display: none;
}
#menu ul li a {
    width: 80px;
}
#menu li:hover ul {
    display: block;
}
#menu > li > a {
    width:100%;
    height: 100%;
    display: block;
    text-decoration:none;
    text-align: center;
    line-height: 30px;
    background-color: white;
    color: black;
    font: bold 15px Arial;
}
#menu > li:hover > a {
    text-decoration: underline;
    background: #EDEDED;
}
#menu ul {
    background: #FFF;
}
#menu ul li a {
    color: #000;
}
#menu ul li:hover a {
    text-decoration: underline;
    background: #EDEDED;
}

Code (markup):

 

I dont see what your problem is.. Just make a gradient image in photoshop and set it as the header/navbar background. Pretty simple process if you have photoshop and know how to use it.

 

Have a nice colour gradient on the ul tag use repeat-x in css to get it to cover across the nav. then make a 60% transparent gif to use on the li a tags on hover. If you use 60% white then it will lighten whatever colour you use for the navbar, 60% black will darken it. Its a nice clean effect, and easily achieved