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）然后绝对定位此元素的宽度为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;
}

删除子菜单项的下边框。

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

1 个答案: