<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="btn-group">
<button type="button" class="btn btn-shopping">Start Shopping</button>
<button type="button" class="btn btn-shopping dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Lorem Ipsum</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<li><div class="mgmenu">
<div class="col-md-12">
<div class="col-md-3">
<div class="lmar"><h4>Lorem Ipsum</h4>
<ul class="list-unstyled ">
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
</ul>
</div> </div>
<div class="col-md-3">
<div class="lmar"><h4>Lorem Ipsum</h4>
<ul class="list-unstyled ">
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
</ul>
</div> </div>
<div class="col-md-3">
<div class="lmar"><h4>Lorem Ipsum</h4>
<ul class="list-unstyled ">
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
</ul>
</div> </div><div class="col-md-3"><div class="thumbnail"><img src="../ss.jpg" class="img-responsive"></div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-3">
<div class="lmar"><h4>Lorem Ipsum</h4>
<ul class="list-unstyled ">
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
</ul>
</div> </div>
<div class="col-md-3">
<div class="lmar"><h4>Papers Cap</h4>
<ul class="list-unstyled ">
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
</ul>
</div> </div>
<div class="col-md-3">
<div class="lmar"><h4>Lorem Ipsum</h4>
<ul class="list-unstyled ">
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
</ul>
</div> </div><div class="col-md-3"><div class="thumbnail"><img src="../ss.jpg" class="img-responsive"></div>
</div>
</div>
</div></li>
</li>
</ul>
</li>
</ul>
</div>
</div>
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: 0px;
margin-left: -1px;
/*-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0px;*/
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after {
display: block;
/*content: " ";*/
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
/*border-width: 5px 0 5px 5px;*/
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.dropdown-menu > li > a:hover{
background:#312e2e;
color:#EC4444;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
/*-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;*/
}
/*-----------------*/
.mgmenu{
max-width:780px;
min-height: 310px;
padding:10px;
margin:0px;
width: 780px;
}
.mgmenu h4{
text-transform:uppercase;
padding:0px;
color: #fff;
text-shadow: none;
margin:0px;
}
.dropdown-menu{
border:none;
background:rgba(103, 96, 93, 0.9);
border-radius:0px;
}
.dropdown-menu ul li a:hover{
background:rgba(46, 42, 42, 0.9);
}
.mgmenu > ul > li > ul li h4 {
color: #fff;
text-shadow: none;
}
.lmar{
border-right:1px solid #141313;
padding-bottom:15px;
}
.lmar .thumbnail{
padding:0px;
border:none;
}
.lmar > ul{
margin-left:10px;
}
.lmar > ul > li > a {
color: #c2c1c1;
cursor: pointer !important;
font-size: 12px;
line-height: 17px;
text-align:center;
text-transform:uppercase;
}
.lmar > ul > li > a:hover{
background:none;
color:#EC4444;
text-decoration:none;
}
.open > .dropdown-menu{
margin-top:0px;
width:191px;
}
.btn-shopping{
background-color:#ff4c47;
background-color:#ff4c47;
background:-moz-linear-gradient(bottom, #ff4c47 0, #fa6d68 99%);
background:-webkit-gradient(linear, left bottom, left bottom, color-stop(0%, #ff4c47), color-stop(99%, #fa6d68));
background:-webkit-linear-gradient(bottom, #ff4c47 0, #fa6d68 99%);
background:-o-linear-gradient(bottom, #ff4c47 0, #fa6d68 99%);
background:-ms-linear-gradient(bottom, #ff4c47 0, #fa6d68 99%);
background:linear-gradient(to bottom, #ff4c47 0, #fa6d68 99%);
height:29px;
line-height:20px;
padding-left:4px 15px;
color:#fff;
text-shadow:none;
position:relative;
font-size:16px;
text-transform:uppercase;
border-radius:0px;
}
.btn-group.open .dropdown-toggle{
background:rgba(103, 96, 93, 10);
color:#FFF;
}
