CSS position issue - css

Question

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 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">Home</li>
<li>Everyone</li>
<li>Profile</li>
<li><a href="#" title="Account" >Account</a>
<ul>
<li>Edit Friends</li>
<li>Account Settings</li>
<li>Privacy Settings</li>
<li>Help Center</li>
<li>Logout</li>
</ul>
</li>
<li>Layouts
<ul class="active">
<li>Default Layout</li>
<li>Default Elements</li>
<li>Default Form</li>
<li>Media Detail</li>
</ul>
</li>
</ul>
</nav>

Answer 1

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.