<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 <ul> 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 <ul> appears where it should, but I cant see the rightNav <ul> at all. 
P.S. this is my first time actually coding the website, prior to this site I've only done the designing aspect.


<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 <ul> 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 <ul> appears where it should, but I cant see the rightNav <ul> at all. 
P.S. this is my first time actually coding the website, prior to this site I've only done the designing aspect.

