Html 列sm-*引导3上绝对div内的宽度问题

我正在制作侧边栏大菜单

但由于所有宽度的百分比，我堆叠了megamenu宽度。 当我使用px宽度，它的工作。我不想用作像素

在这里审判：

将鼠标悬停在

服装和配饰上时，您将看到问题

HTML:
您将无法使用低于100%的百分比，因为您包含的div小于特定子菜单中所需的div。您可以尝试将“服装和配饰”中的
ul
扩大到250%：

<li class="list-group-item">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
        Clothing & Accessories <b class="right-caret"></b>
</a>
    <ul class="sidemenu-sub dropdown-menu" role="menu" style="width:250%">
    <!--                         this is what I added |_________________|
    ... -->

    </ul>
</li>





我想制作动态宽度仅适用于当前
li
节点的250宽井。但对于某些节点，宽度太宽，对于另一个节点，宽度太窄。我必须为所有设置自动宽度。当我将宽度设置为px或像你一样的百分比时，它会工作。但这不是动态方法。一些
li
节点窄，一些
li
节点宽宽度为250的井适用于较宽的菜单，但不适用于较窄的菜单。因此，当您设置宽度
250%
当日交易
菜单项时，您会看到宽度如此之大。它对我来说足够动态，但仍然无法得到您想要的。。。是否希望所有子菜单背景始终具有相同的宽度？或者你想把嵌入的视频放在子菜单下面。。。？您希望最终结果是什么样子？所有子菜单的宽度必须不同。有些子菜单有2列，其他子菜单有3列。当我将宽度设置为250%时，单个列的宽度是如此之大。如果您仅将该
ul
元素的宽度设置为250%，则该菜单项仅能很好地覆盖视频的背景。。。当然，如果你把它应用到所有人身上，它会使所有人都变得更宽，所以不要这样做。
.sidemenu { position: relative }
.sidemenu > .list-group-item { cursor: pointer; padding: 0; position: initial;}
.sidemenu > .list-group-item > a { width: 100%; padding: 10px 15px; display: block; color: #333; text-decoration: none; position: relative; }

.sidemenu-sub 
{
    display: none;
    width: auto;
    top: -2px;
    bottom: 0;
    left: 100% !important;
    background: #FFF;
    position: absolute;
    border: 1px solid #dedede;
    background-color: #f5f5f5;
    z-index: 1001;
    border-left: 0;

    webkit-box-shadow: none;
    box-shadow: none;
}

.sidemenu > .list-group-item:hover 
{
    border-right: 0;    
}

.sidemenu > .list-group-item:hover  .dropdown-menu
{
    display: block;
}

.sidemenu > li.list-group-item:hover, li.list-group-item:focus {
    text-decoration: none;
    background-color: #f5f5f5;
}

.right-caret 
{
    border-bottom: 4px solid transparent;
    border-top: 4px solid transparent;
    border-left: 4px solid #000000;
    display: inline-block;
    height: 0;
    opacity: 0.3;
    vertical-align: middle;
    width: 0;
    position: absolute;

    bottom:40%;
    top: 40%;
    right: 10px
}

<li class="list-group-item">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
        Clothing & Accessories <b class="right-caret"></b>
</a>
    <ul class="sidemenu-sub dropdown-menu" role="menu" style="width:250%">
    <!--                         this is what I added |_________________|
    ... -->

    </ul>
</li>