我正在试图制作侧边栏megamenu。
但由于所有宽度百分比，我堆叠了megamenu宽度。 当我使用px宽度时，它的工作原理。我不想用像素。
在此尝试：http://jsfiddle.net/p8SeB/
当您将鼠标悬停在Clothing & Accessories上时，您会看到问题
<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>
.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
}
答案 0 :(得分：0)