html - <ul>位置无法正常运行

我有一个使用CSS Sprites进行的导航。问题是我在导航的两半中间都有网站的徽标。因此，我所做的就是将导航分为两个部分： leftNav和rightNav。这减少了我的链接功能代码，但这是我的问题。最初，leftNav和rightNav是它们自己的DIV，但在尝试清理代码后，我将两个leftNav和rightNav放在了一个称为Navigation的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的位置。我忽略了其余代码或网站的代码，因为它与问题无关。
-谢谢，meepz

最佳答案

在没有现场演示（或jsFiddle / jsBin）的情况下弄清楚自己想要什么是很烦人的，但是如果我进行了这些更改，我至少可以看到两个ul：

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

如果这不是您想要的，我建议您显示设计图像的相关部分。

关于html - <ul>位置无法正常运行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/4640779/