javascript - 相对宽度子菜单标题的100％宽度

我正在创建标题宽度子菜单。我想使子菜单与其父菜单项对齐，但背景要为标题宽度的100％。

由于菜单相对于其父元素定位，因此子菜单的宽度很难达到标题的100％。

.menu-main .menu .menu-item {
    position: relative;
}

.menu > li > ul {
    position: absolute;
    display: block;
    width: 100%;
    top: 150px;
    padding: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    background: #ffffff;
    border-radius: 0 0 3px 3px;
    -webkit-transition: all .3s ease .15s;
    -moz-transition: all .3s ease .15s;
    -o-transition: all .3s ease .15s;
    -ms-transition: all .3s ease .15s;
    transition: all .3s ease .15s;
}

   <li class="menu-item withchildren">
         <a class="menu-link" href="/brandid">Brändid</a>
              <!-- this should be full width with white background -->
              <ul class="submenu">
                   <li class="menu-item">
                    <a class="menu-link" href="/brandid/rolf-benz">Rolf-Benz</a>
                  </li>
              </ul>
              <!-- end submenu -->
    </li>

JSF情况中间：https://jsfiddle.net/wo66damx/2/

感谢您的输入！

最佳答案

    .menu {
position: relative;
display:inline-block;
width:100%; }

您可以将.menu类设置为width：100％;这对我有用。
这是一个JSFiddle：https://jsfiddle.net/wo66damx/11/