This is the solution for your problem.. Hope its helpful
<!--- HTML -->
<ul class="dropdown-menu">
<li><a href="#">Main menu</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a>
<ul class="dropdown-submenu">
<li><a href="#">Sub menu</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
<!-- End HTML -->
/** CSS **/
.dropdown-menu{
margin: 0;
padding: 10px;
list-style: none;
background-color: #dddddd;
max-width:300px;
width: auto;
display: inline-block;
margin-left: 200px;
position:relative;
}
.dropdown-menu li , .dropdown-submenu li{
padding: 5px;
}
.dropdown-menu li a{
text-decoration: none;
color: #ff0000;
}
.dropdown-submenu li a{
text-decoration: none;
color: #fff;
}
.dropdown-submenu {
position: absolute;
list-style:none;
background-color: red;
color:#fff;
margin:0;
padding: 10px;
z-index:2;
width: 100%;
top:0;
right:100%;
}
/** End CSS **/
这里是链接JSFiddle
add code js fiddle –