CSS позиция вопроса

Question

в основном у меня есть div с шириной 960px, и он имеет навигацию справа, навигация работает нормально, только последняя суб-навигация показывает контент, расширенный до 960px, поэтому мне было интересно, могу ли я как-то переместить его в левую сторону,толкая верхнюю навигацию с ним, я пытался, но это не работает.Ниже приведен пример и CSS-код

, последняя черная линия - конец 960 пикселей;

снимок экранадля второго вопроса навигации (вопрос из комментария)

пример кода 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 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>

Answer 1

Попробуйте добавить следующее:

#topNav ul ul {
    right: 0;
}

Вместо left: 0;. Это должно выровнять его по правой стороне элемента верхнего меню (в данном случае Layouts), а не по левой стороне.