<ul> позиция не работает, как я надеялся

Question

У меня есть навигация, которую я сделал, используя CSS Sprites. Дело в том, что у меня есть логотип для сайта в середине двух половинок навигации. Итак, я разделил навигацию на две части; leftNav и rightNav. это сократило мой код для функций ссылки, но вот мой вопрос. Первоначально leftNav и rightNav были их собственными DIV, но после попытки очистить мой код я сделал два leftNav и rightNav, которые находятся внутри div, под названием навигация:

<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>

Вот 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;
}

Так что моя проблема в том, что leftNav появляется там, где и должен, но я вообще не вижу rightNav. Постскриптум я впервые пишу код сайта, до этого я занимался только дизайном.

Я забыл упомянуть, что ролловеры для ссылок просто перемещают позицию bg. Я оставил код для остальных или веб-сайт, потому что он не имеет отношения к вопросу. -Спасибо, мипз

Answer 1

Довольно неприятно выяснять, что вы хотите, без живого демо (или jsFiddle / jsBin), но если я внесу эти изменения, я по крайней мере смогу увидеть оба из ul:

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

Если это не совсем то, что вы хотите, я рекомендую вам показать соответствующую часть изображения дизайна.