html - 尝试创建一个横跨整个页面的子菜单

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

理想情况下，如果你想让一个元素占据整个宽度，你应该把它放在与你最上面的元素相同的水平上，这个元素也占据了整个宽度(例如 body，如果你的 body 没有设置任何宽度)然后将此元素绝对定位为 100% 的宽度。

但是在您的情况下，您可以使用固定位置，尝试将您定义宽度为 9999px 的 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;
}

之所以必须将 !important 添加到宽度，是因为当前宽度正在被负责使菜单正常工作的 javascript 覆盖。使用 !important 不是最佳做法，如果你想正确地使用它，你应该更改你的 javascript，这样宽度就不会被它设置:那么你就不需要使用 !important 规则。

正如我在上面的评论中提到的，改变这个

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

为此:

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

去除子菜单项的底部边框。