Trying to create a submenu that stretches across entire page - html

Question

I'm trying to create a submenu that stretches across an entire page on http://jobcreatr.com
The problem is that the submenu is only stretching from the top menu item all the way to the right. I want it to go all the way across. Also, there's some weird padding on the submenu items, which I think is related to the border bottom on hover - which I don't even want on the submenu items.
How do I get the submenu to stretch across the entire page, and also get rid of that weird padding/border-bottom.
Here's the css I have:
.sf-menu.sf-horizontal.sf-shadow ul, .sf-menu.sf-vertical.sf-shadow ul, .sf-menu.sf-navbar.sf-shadow ul ul {
width: 100%;
background-color: #F6F6F6;
background: none;
list-style-type: none;
text-align: center;
margin-top:22px;
overflow: none;
display: 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 a {
background-color: #000/*#F6F6F6*/;
width: 9999px;
}
.sf-menu.sf-style-whiteshadow li {
overflow: visible;
}
.sf-menu.sf-style-whiteshadow li:hover {
border-bottom: 4px solid #000;
}
.sf-menu.sf-style-whiteshadow .sf-depth-2 {
border-bottom: none;
}
Here's the HTML:
<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">
<li id="menu-1300-2" class="middle even sf-item-2 sf-depth-1 sf-no-children">
<li id="menu-1301-2" class="last odd sf-item-3 sf-depth-1 sf-total-children-1 sf-parent-children-0 sf-single-children-1 menuparent">
<a class="sf-depth-1 menuparent sf-with-ul" title="" href="http://jobcreatr.com/products">
<ul class="sf-hidden" style="float: none; width: 12em; display: block;">
<li id="menu-1632-2" class="firstandlast odd sf-item-1 sf-depth-2 sf-no-children" style="white-space: normal; width: 9999px; position: absolute; float: left;">
<a class="sf-depth-2" title="" href="http://www.google.com" style="float: none; width: auto;">test</a>
</li>
</ul>
</li>
</ul>

Answer 1

Ideally if you want to make an element take up the whole width you should have it on the same level as your uppermost element which also takes up the whole width (for example body, if your body does not have any width set) and then position this element absolutely with a width of 100%.
However in your case you could use fixed position, try changing your css rules where you have defined width of 9999px to this:
.sf-menu.sf-horizontal.sf-shadow ul a, .sf-menu.sf-vertical.sf-shadow ul a, .sf-menu.sf-navbar.sf-shadow ul ul a {
background-color: #000/*#F6F6F6*/;
width: 100%!important;
position: fixed;
left: 0;
}
The reason why you have to add the !important to your width is because currently the width is being overwritten by javascript responsible for making the menu work. Using !important isn't best practice and if you want to do it properly you should change your javascript so that the width does not get set by it: then you do not need to use the !important rule.
As mentioned in my comment above, change this
.sf-menu.sf-style-whiteshadow li:hover {
border-bottom: 4px solid #000;
}
to this:
.sf-menu.sf-style-whiteshadow > li:hover {
border-bottom: 4px solid #000;
}
to get rid of the bottom border of your submenu item.