basically I have a div with a width of 960px and it has navigation on the right side, the navigation works fine, only the last sub-navigation shows content expanded to 960px, so I was wondering, somehow I can click it on the left side , without tapping the top navigation with it, I tried, but it does not work. below is an example and css code
The last black line is the end of 960px;
screenshot for navigation second question (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>
Basit source share