menu Probleem

hallo,

Ik was bezig een menu te fixen voor een friend. maar ik kom er niet uit. dit is het probleem: [URL]http://www.habbospeed.nl/knoppenmenu2.php
Alls staat onder elkaar.
homepage
games
actueel
fancenter
Habbo gidsen
Leden
maar de bedoeling is dat alles zo staat:
homepage games actueel fancenter Habbo gidsen Leden

weet iemand hoe ik dit moet oplossen. hier is het menu:

<style type="text/css">
    .menu_balk {
        background-image:url(http://www.algemeenhabbo.nl/images/V3.1/menubalk.PNG);
        width:932px;
        height:25px;
        float:left;
    }
    
    #menu {
        background-image:url(http://www.algemeenhabbo.nl/images/V3.1/menubalk.PNG);
        width:922px;
        height:27px;
        padding:0;
        margin:0;
    }
    .menu {
        padding:0 0 0 4px;
        margin:0; 
        list-style:none; 
        height:27px;  
        position:static; 
        z-index:500; 
        font-family:arial, verdana, sans-serif;
        font-weight:bold;
    }
    
    .menu li a.top_link {
        display:block; 
        float:left; 
        height:25px; 
        line-height:24px;  
        color:#FFF; 
        text-decoration:none; 
        font-size:11px; 
        font-weight:bold; 
        padding:0 0 0 0px; 
        height:25px; 
        cursor:pointer;
        background: url('http://www.algemeenhabbo.nl/images/V3.1/menu_blank.PNG');
    }
    .menu li a.top_link span {
        float:left; 
        display:block; 
        padding:0 15px 0 15px; 
        height:25px;
        background:url('http://www.algemeenhabbo.nl/images/V3.1/menu_blank.PNG') right top;
    }
    .menu li a.top_link:hover {
        color:#FFF; 
        background: url('http://www.algemeenhabbo.nl/images/V3.1/menu_hover.PNG') no-repeat; height:25px;
    }
    .menu li:hover > a.top_link {
        color:#FFF; 
        background: url('http://www.algemeenhabbo.nl/images/V3.1/menu_hover.PNG') no-repeat; height:25px;
    }
    .menu li:hover > a.top_link span {
        background:url('http://www.algemeenhabbo.nl/images/V3.1/menu_hover.PNG') no-repeat right top; 
        height:25px;
    }
    .menu table {
        border-collapse:collapse; 
        width:0; 
        height:0; 
        position:absolute; 
        top:0; 
        left:0;
    }
    a {
        color:#069;
        text-decoration:none;
    }
    a:hover {
        font-weight:bold;
        text-decoration:none;
    }
</style>
<div class="menu_balk">
    <ul class="menu">
        <li class="top"><a href="index.php" class="top_link"><span>Homepage</span></a></li>
        <li class="top"><a href="games.php" class="top_link"><span>Games</span></a></li>
        <li class="top"><a href="actueel.php" class="top_link"><span>Actueel</span></a></li>
        <li class="top"><a href="fancenter.php" class="top_link"><span>Fancenter</span></a></li>
        <li class="top"><a href="about.php" class="top_link"><span>Habbo gidsen</span></a></li>
        <li class="top"><a href="leden.php" class="top_link"><span>Leden</span></a></li>
    </ul>
</div>