col-sm-* width issue inside absolute div on Bootstrap 3 - html

Question

I'm triying to make sidebar megamenu.
But i stacked megamenu width because of all widths percentage.
When i use px width, its working. I dont want to use as pixels.
Tried here: http://jsfiddle.net/p8SeB/
When you hover mouse on Clothing & Accessories, you will see the issue
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>Action 2
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</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>
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros
</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>Another 4
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</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>Another 5
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</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>Another 6
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</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>Another 7
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</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>Another 8
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</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>Another 9
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</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

You won't be able to use percentages that are lower than 100% for this one as you're enclosing within divs that are smaller than what you need in that specific submenu. You could try to widen the ul to 250% within 'Clothing & Accessories':
<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