CSS位置问题

Question

基本上我有宽度为 960px 的 div，它在右手边有导航，导航工作正常，只是最后一个子导航显示内容扩展到 960px，所以我想知道我是否可以以某种方式将它推到左侧，而不用它插入顶部导航，我一直在尝试，但它不起作用。以下是示例和 css 代码

navigation, the last black line is the end of 960px;

screenshot for navigation question two (question from comment)

CSS代码示例

#topNav {
    float: right;
    position: relative;
}
    #topNav li {
        position: relative;
        float: left;
        line-height:1.5em;
        padding: 0 .5em;
    }
    #topNav a span {
        clear: both;
    }
    #topNav ul ul {
        display:none;
        position: absolute;
        top: 20px;
        right: 0;
    }
    #topNav ul ul li {
        float:none;
        white-space:nowrap;
        position: relative;
        margin:0;
    }
    #topNav li.active {
        height: 50px;
        background-color:#FFF;
        border-top:#666 1px solid;
        border-right:#666 1px solid;
        border-left:#666 1px solid;
        border-bottom:#FFF 1px solid;
        z-index: 2;
    }
    #topNav ul ul.active {
        display: block;
        background-color:#F8F8F8;
        border:#666 1px solid;
        margin-top: -1px;
        margin-right: -1px;
        z-index: 1;
    }

html 5 代码

<nav id="topNav">
            <ul>
              <li class="active"><a href="/">Home</a></li>
              <li><a href="#" title="Nav Link 3">Everyone</a></li>
              <li><a href="#" title="Profile">Profile</a></li>
              <li><a href="#" title="Account" >Account</a>
                    <ul>
                        <li><a href="#" title="Edit Freinds">Edit Friends</a></li>
                        <li><a href="#" title="Account Settings">Account Settings</a></li>
                        <li><a href="#" title="Privacy Settings">Privacy Settings</a></li>
                        <li><a href="#" title="Help Center">Help Center</a></li>
                        <li><a href="#" title="Logout">Logout</a></li>
                    </ul> 
              </li>
              <li><a href="#" title="Layouts" class="active">Layouts</a>
                    <ul class="active">
                        <li><a href="#" title="Default">Default Layout</a></li>
                        <li><a href="#">Default Elements</a></li>
                        <li><a href="#">Default Form</a></li>
                        <li><a href="#">Media Detail</a></li>
                    </ul>        
                </li>
            </ul>
        </nav>

Answer 1

尝试添加以下内容:

#topNav ul ul {
    right: 0;
}

而不是 left: 0;。这应该使其与顶部菜单项(在本例中为布局)的右侧对齐，而不是左侧。