CSS position issue

basically i have div with width of 960px and it has navigation on right hand, the navigation works fine, just the last sub navigation shows content extended to 960px, so i was wondering if somehow i can push it to left side, without pushing top navigation with it, i been trying but it dont work. following is the example and css code

navigation, the last black line is the end开发者_如何学Go of 960px;

screenshot for navigation question two (question from comment)

css code example

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

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

Try adding the following:

#topNav ul ul {
    right: 0;
}

Rather than left: 0;. This should make it line up with the right hand side of the top menu item (Layouts in this case), rather than the left hand side.