<ul> position not working as I had hoped

I have a navigation that I made using CSS Sprites. The thing is I have the logo for the website in the middle of the two halves of the navigation. So what I did was split the navigation into two parts; leftNav and rightNav. this cut down on my code for the link functions but here is my question. Originally leftNav and rightNav were their own DIV's but after trying to clean up my code I made the two leftNav and rightNav that are inside of a div called navigation:

<div id="navigation" style="position:absolute; width:789px; height:29px; left:0; bottom:0; z-index:0; background:#ccc;">

        <ul id="leftNav" style="left:0;"> 
            <li><a class="leftLinkActive" href="index.html"><span>Home</span></a></li> 
            <li><a class="middleLink" href="#"><span>About</span></a></li>
            <li><a class="rightLink" href="#"><span>Flavors</span></a></li> 
        </ul>
        <ul id="rightNav" style="right:0;"> 
            <li><a class="leftLink" href="#"><span>Catering</span></a></li> 
            <li><a class="middleLink" href="#"><span>Community</span></a></li>
            <li><a class="rightLink" href="#"><span>Contact</span></a></li> 
        </ul>
    </div>

Here is the css:

#leftNav, #rightNav{
position:relative;
text-decoration: none;
list-style: none;
padding: 0;
margin: 0;
overflow: hidden;
width:324px; 
height:29px;
}



#leftNav li,开发者_如何学编程 #rightNav li{
    float:left;
}
#navigation #leftNav a{
    display: block;
    background-image: url("../images/leftNav.png");
    padding-top: 29px;
    text-decoration: none;
}
#navigation #rightNav a{
    display: block;
    background-image: url("../images/rightNav.png");
    padding-top: 29px;
    text-decoration: none;
}

So my problem is that the leftNav appears where it should, but I cant see the rightNav at all. P.S. this is my first time actually coding the website, prior to this site I've only done the designing aspect.

I forgot to mention that the rollovers for the links are just moving the position of the bg. I left out the code for the rest or the website because it isnt relevant to the question. -Thanks, meepz

It's rather annoying to figure out what you want without a live demo (or a jsFiddle/jsBin), but if I make these changes, I can at least see both of the ul:

<ul id="leftNav" style="float:left"> 
...
<ul id="rightNav" style="float:right"> 

If this isn't quite what you want, I recommend you show the relevant part of the design image.