Question

我正在以下网站上工作：

我希望子菜单背景在菜单的整个宽度上从左到右延伸，而不会改变文本出现的位置。

以下是菜单中的一些相关代码：

<li  id="menu-item-11214"  class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-11106 current_page_item menu-item-has-children menu-item-11214 fusion-dropdown-menu"  ><a    href="http://dev.icsandbox.com/expertise/">Expertise <span class="caret"></span></a>
<ul class="sub-menu">
    <li  id="menu-item-11248"  class="menu-item menu-item-type-post_type menu-item-object-page menu-item-11248 fusion-dropdown-submenu"  ><a    href="http://dev.icsandbox.com/overview-3/">Overview</a></li>
    <li  id="menu-item-11215"  class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-11215 fusion-dropdown-submenu"  ><a    href="http://dev.icsandbox.com/families-individuals/">Families &#038; Individuals</a>
    <ul class="sub-menu">
        <li  id="menu-item-11275"  class="menu-item menu-item-type-post_type menu-item-object-page menu-item-11275"  ><a    href="http://dev.icsandbox.com/tax-advisory-3/">Tax &#038; Advisory</a></li>
        <li  id="menu-item-11277"  class="menu-item menu-item-type-post_type menu-item-object-page menu-item-11277"  ><a    href="http://dev.icsandbox.com/trust-estates/">Trust &#038; Estates</a></li>
    </ul>
</li>

我尝试过一些事情，但结果很奇怪。背景将从文本所在的位置开始，并拉出我指定的像素数，但每个新的父菜单都将子菜单向右移动。我想要的是菜单看起来像：

Production

Answer 1

使用psuedo元素拉伸整个宽度。有点像...

ul li ul {
    position: relative;
}
ul li ul:before,
ul li ul:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 999999px;
    background-color: #fff;
}
ul li ul:before {
    right: 100%;
}

ul li ul:after{
    left: 100%;
}

我在下面使用单个div添加了一个工作示例。

＆＃13;

.full-width-please {
    position: relative;
    width: 300px;
    height: 200px;
    margin: 0 auto;
    background: green;
}
.full-width-please:before,
.full-width-please:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 999999px;
    background-color: blue;
}
.full-width-please:before {
    right: 100%;
}

.full-width-please:after {
    left: 100%;
}

＆＃13;

<div class="full-width-please"></div>

＆＃13;

如何使下拉子菜单背景在整个菜单宽度上延伸

1 个答案: