html - Bootstrap 3 上绝对 div 内的 col-sm-* 宽度问题

Question

我正在尝试制作侧边栏 megamenu。

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

在这里试过:http://jsfiddle.net/p8SeB/

当您将鼠标悬停在 Clothing & Accessories 上时，您会看到问题

HTML:

<div class="row">
    <div class="col-sm-3">
        <ul class="sidemenu yamm list-group">
            <li class="list-group-item">    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                Deal of the Day <b class="right-caret"></b>
                            </a>

                <ul class="sidemenu-sub dropdown-menu" role="menu">
                    <li><a href="#">Action 2</a>

                    </li>
                    <li><a href="#">Another action</a>

                    </li>
                    <li><a href="#">Something else here</a>

                    </li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a>

                    </li>
                </ul>
            </li>
            <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">
                    <li>
                        <div class="yamm-content">
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="list-group">    <a href="#" class="list-group-item active">
                                                      Cras justo odio
                                                    </a>
    <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
    <a href="#" class="list-group-item">Morbi leo risus</a>
    <a href="#" class="list-group-item">Porta ac consectetur ac</a>
    <a href="#" class="list-group-item">Vestibulum at eros</a>

                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="embed-container">
                                        <iframe src="http://player.vimeo.com/video/5606758" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
                                    </div>
                                        <h5><span class="light">Awesome</span> Video</h5>

                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, maiores.</p>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
            <li class="list-group-item">    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                Electronic <b class="right-caret"></b>
                            </a>

                <ul class="sidemenu-sub dropdown-menu" role="menu">
                    <li><a href="#">Another 4</a>

                    </li>
                    <li><a href="#">Another action</a>

                    </li>
                    <li><a href="#">Something else here</a>

                    </li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a>

                    </li>
                </ul>
            </li>
            <li class="list-group-item">    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                Home, Dolls, Toys <b class="right-caret"></b>
                            </a>

                <ul class="sidemenu-sub dropdown-menu" role="menu">
                    <li><a href="#">Another 5</a>

                    </li>
                    <li><a href="#">Another action</a>

                    </li>
                    <li><a href="#">Something else here</a>

                    </li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a>

                    </li>
                </ul>
            </li>
            <li class="list-group-item">    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                Collection & Art <b class="right-caret"></b>
                            </a>

                <ul class="sidemenu-sub dropdown-menu" role="menu">
                    <li><a href="#">Another 6</a>

                    </li>
                    <li><a href="#">Another action</a>

                    </li>
                    <li><a href="#">Something else here</a>

                    </li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a>

                    </li>
                </ul>
            </li>
            <li class="list-group-item">    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                Personal Care & Fitness <b class="right-caret"></b>
                            </a>

                <ul class="sidemenu-sub dropdown-menu" role="menu">
                    <li><a href="#">Another 7</a>

                    </li>
                    <li><a href="#">Another action</a>

                    </li>
                    <li><a href="#">Something else here</a>

                    </li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a>

                    </li>
                </ul>
            </li>
            <li class="list-group-item">    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                Music, Movies, Books, Games <b class="right-caret"></b>
                            </a>

                <ul class="sidemenu-sub dropdown-menu" role="menu">
                    <li><a href="#">Another 8</a>

                    </li>
                    <li><a href="#">Another action</a>

                    </li>
                    <li><a href="#">Something else here</a>

                    </li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a>

                    </li>
                </ul>
            </li>
            <li class="list-group-item">    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                Cars, Motorcycles Accessories <b class="right-caret"></b>
                            </a>

                <ul class="sidemenu-sub dropdown-menu" role="menu">
                    <li><a href="#">Another 9</a>

                    </li>
                    <li><a href="#">Another action</a>

                    </li>
                    <li><a href="#">Something else here</a>

                    </li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a>

                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="col-sm-9">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>
            <!-- Wrapper for slides -->
            <div class="carousel-inner">
                <div class="item active">
                    <img src="http://placehold.it/790x300" style="width: 100%">
                </div>
                <div class="item">
                    <img src="http://placehold.it/790x300" style="width: 100%">
                </div>
                <div class="item">
                    <img src="http://placehold.it/790x300" style="width: 100%">
                </div>
            </div>
        </div>
    </div>
</div>

CSS:

.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
}

Answer 1

您将无法为此使用低于 100% 的百分比，因为您包含在小于您在该特定子菜单中所需的 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>

I updated your fiddle