CSS职位问题

Question

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

  

导航，最后一条黑线是   结束960px;

  

导航问题二的截图   （评论中的问题）

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;。 应该使其与顶部菜单项（本例中为Layouts）的右侧对齐，而不是左侧。