html - How to format submenu so that it stretches across the screen -

i'm trying menus formatted correctly. top menu submenu vertical, , i'd prefer more gooddata.com.

the site jobcreatr.com, , i'm trying make skeleton of site gooddata.com.

my html follows:

<ul id="superfish-2" class="menu sf-menu sf-main-menu sf-horizontal sf-style-whiteshadow sf-total-items-3 sf-parent-items-1 sf-single-items-2 superfish-processed sf-js-enabled sf-shadow"> <li id="menu-1299-2" class="first odd sf-item-1 sf-depth-1 sf-no-children"> <a class="sf-depth-1" title="" href="http://jobcreatr.com/activity">activity feed</a> </li> <li id="menu-1300-2" class="middle sf-item-2 sf-depth-1 sf-no-children"> <a class="sf-depth-1" title="" href="http://jobcreatr.com/course-categories">course categories</a> </li> <li id="menu-1301-2" class="last odd sf-item-3 sf-depth-1 sf-total-children-6 sf-parent-children-0 sf-single-children-6 menuparent"> <a class="sf-depth-1 menuparent sf-with-ul" title="" href="http://jobcreatr.com/products"> courses <span class="sf-sub-indicator"> »</span> </a> <ul class="sf-hidden" style="float: none; width: 12.6429em; display: block;"> <li id="menu-2170-2" class="first odd sf-item-1 sf-depth-2 sf-no-children" style="white-space: normal; float: left; width: 100%;"> <a class="sf-depth-2" title="" href="/course-categories/business" style="float: none; width: auto;">business</a> </li> <li id="menu-2171-2" class="middle sf-item-2 sf-depth-2 sf-no-children" style="white-space: normal; float: left; width: 100%;"> <a class="sf-depth-2" title="" href="/course-categories/computers" style="float: none; width: auto;">computers</a> </li> <li id="menu-2172-2" class="middle odd sf-item-3 sf-depth-2 sf-no-children" style="white-space: normal; float: left; width: 100%;"> <a class="sf-depth-2" title="" href="/course-categories/education" style="float: none; width: auto;">education</a> </li> <li id="menu-2173-2" class="middle sf-item-4 sf-depth-2 sf-no-children" style="white-space: normal; float: left; width: 100%;"> <a class="sf-depth-2" title="" href="/course-categories/health" style="float: none; width: auto;">health & fitness</a> </li> <li id="menu-2174-2" class="middle odd sf-item-5 sf-depth-2 sf-no-children" style="white-space: normal; float: left; width: 100%;"> <a class="sf-depth-2" title="" href="/course-categories/labor" style="float: none; width: auto;">labor</a> </li> <li id="menu-2175-2" class="last sf-item-6 sf-depth-2 sf-no-children" style="white-space: normal; float: left; width: 100%;"> <a class="sf-depth-2" title="" href="/course-categories/other" style="float: none; width: auto;">other</a> </li> </ul> </li> </ul> 

i've tried setting css inline on both tag

tag, reason menu stays vertical.

here's css:

.sf-menu.sf-horizontal.sf-shadow ul, .sf-menu.sf-vertical.sf-shadow ul, .sf-menu.sf-navbar.sf-shadow ul ul { width: 100% !important; background-color: #f6f6f6; background: none;     list-style-type: none;     text-align: center;     margin-top:22px;     overflow: none; }  .sf-menu.sf-horizontal.sf-shadow ul a, .sf-menu.sf-vertical.sf-shadow ul a, .sf-menu.sf-navbar.sf-shadow ul ul { /*width: 100%!important;*/ position: relative; left: 0; display: inline-block; }  .sf-menu.sf-style-whiteshadow li { overflow: visible; } 

what should changed? keeping width small, can't expand entire width of page?

your subnavigation <ul class="sf-hidden"> absolutely positioned relative it's parent <li>.

in superfish css has:

.sf-menu li {   float: left;   position: relative;   z-index: 498; } 

you need override 'relative' positioning. if have access css file change position: relative position: static. if not, override more specific selector:

.content .sf-menu li {   position: static;  }