试图创建横跨整个页面的子菜单。

Question

我正在尝试创建一个子菜单，它可以延伸到http://jobcreatr.com上的整个页面

问题是，子菜单只是从顶部的菜单项一直延伸到右边。我要它一直往前走。另外，在子菜单上有一些奇怪的填充，我认为这与悬停时的边框底部有关--我甚至不想在子菜单项目上这样做。

我如何使子菜单延伸到整个页面，同时也摆脱了奇怪的填充/边框底部。

下面是我的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%;
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;
}

下面是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

理想情况下，如果您想要使一个元素占用整个宽度，您应该让它与最上面的元素处于相同的水平，后者也占用整个宽度(例如，如果您的身体没有任何宽度设置)，然后绝对地将该元素定位为宽度为100%。

但是，在您的情况下，您可以使用固定位置，尝试将您定义的宽度为9999 to的css规则更改为：

.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;
}

您必须将！添加到宽度中的原因是，当前宽度正被负责使菜单工作的javascript覆盖。使用！重要并不是最佳实践，如果您想正确地使用它，您应该更改javascript，这样宽度就不会被它设置:那么您就不需要使用“重要”规则了。

正如我在上面的评论中提到的，更改此

.sf-menu.sf-style-whiteshadow li:hover {
    border-bottom: 4px solid #000;
}

对此：

.sf-menu.sf-style-whiteshadow > li:hover {
    border-bottom: 4px solid #000;
}

若要去掉子菜单项的底部边框，请执行以下操作。