<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 id="menuEstatic" class="navbar navbar-default navbar-static-top hidden-xs">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul id="submenu" class="nav navbar-nav">
<li class="dropdownEstatic dropdown menu-large">
<a href="#"
class="dropdown-toggle" data-toggle="dropdown"> Product
Listing <span class="glyphicon glyphicon-menu-down pull-right"></span>
</a>
<ul id="menuEstaticoFlecha" class="dropdown-menu megamenu">
<div class="container">
<li>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail"> <img
src="http://placehold.it/150x120" />
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail"> <img
src="http://placehold.it/150x120" />
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail"> <img
src="http://placehold.it/150x120" />
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail"> <img
src="http://placehold.it/150x120" />
</a>
</div>
</li>
</div>
</ul></li>
<li class="dropdownEstatic dropdown menu-large">
<a href="#"
class="dropdown-toggle" data-toggle="dropdown"> Product
Listing <span class="glyphicon glyphicon-menu-down pull-right"></span>
</a>
<ul id="menuEstaticoFlecha" class="dropdown-menu megamenu">
<div class="container">
<li>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail"> <img
src="http://placehold.it/150x120" />
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail"> <img
src="http://placehold.it/150x120" />
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail"> <img
src="http://placehold.it/150x120" />
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail"> <img
src="http://placehold.it/150x120" />
</a>
</div>
</li>
</div>
</ul></li>
<li class="dropdownEstatic dropdown menu-large">
<a href="#"
class="dropdown-toggle" data-toggle="dropdown"> Product
Listing <span class="glyphicon glyphicon-menu-down pull-right"></span>
</a>
<ul id="menuEstaticoFlecha" class="dropdown-menu megamenu">
<div class="container">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Glyphicons</li>
<li><a href="#">Available glyphs</a></li>
<li class="disabled"><a href="#">How to use</a></li>
<li><a href="#">Examples</a></li>
<li class="divider"></li>
<li class="dropdown-header">Dropdowns</li>
<li><a href="#">Example</a></li>
<li><a href="#">R</a></li>
<li><a href="#">Headers</a></li>
<li><a href="#">Q</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Button groups</li>
<li><a href="#">Basic example</a></li>
<li><a href="#">Button toolbar</a></li>
<li><a href="#">Sizing</a></li>
<li><a href="#">Nesting</a></li>
<li><a href="#">3</a></li>
<li class="divider"></li>
<li class="dropdown-header">2</li>
<li><a href="#">1</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Input groups</li>
<li><a href="#">Basic example</a></li>
<li><a href="#">Sizing</a></li>
<li><a href="#">Checkboxes and radio addons</a></li>
<li class="divider"></li>
<li class="dropdown-header">Navs</li>
<li><a href="#">Tabs</a></li>
<li><a href="#">Pills</a></li>
<li><a href="#">Justified</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Navbar</li>
<li><a href="#">Default navbar</a></li>
<li><a href="#">Buttons</a></li>
<li><a href="#">Text</a></li>
<li><a href="#">Non-nav links</a></li>
<li><a href="#">Component alignment</a></li>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
</ul>
</li>
</div>
</ul></li>
</ul>
</div>
</div>
<div id="menuEstatic" class="visible-xs">
<div class="collapse in">
<ul id="submenu" class="nav navbar-nav">
<li class="dropdown menu-large">
<a href="#"
class="dropdown-toggle" data-toggle="dropdown"> Product
Listing <span class="glyphicon glyphicon-menu-down pull-right"></span>
</a>
<ul id="menuEstaticoFlecha" class="dropdown-menu megamenu">
<div class="container">
<li>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail"> <img
src="http://placehold.it/150x120" />
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail"> <img
src="http://placehold.it/150x120" />
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail"> <img
src="http://placehold.it/150x120" />
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail"> <img
src="http://placehold.it/150x120" />
</a>
</div>
</li>
</div>
</ul></li>
<li class="dropdown menu-large">
<a href="#"
class="dropdown-toggle" data-toggle="dropdown"> Product
Listing <span class="glyphicon glyphicon-menu-down pull-right"></span>
</a>
<ul id="menuEstaticoFlecha" class="dropdown-menu megamenu">
<div class="container">
<li>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail"> <img
src="http://placehold.it/150x120" />
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail"> <img
src="http://placehold.it/150x120" />
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail"> <img
src="http://placehold.it/150x120" />
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail"> <img
src="http://placehold.it/150x120" />
</a>
</div>
</li>
</div>
</ul></li>
<li class="dropdown menu-large">
<a href="#"
class="dropdown-toggle" data-toggle="dropdown"> Product
Listing <span class="glyphicon glyphicon-menu-down pull-right"></span>
</a>
<ul id="menuEstaticoFlecha" class="dropdown-menu megamenu">
<div class="container">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Glyphicons</li>
<li><a href="#">Available glyphs</a></li>
<li class="disabled"><a href="#">How to use</a></li>
<li><a href="#">Examples</a></li>
<li class="divider"></li>
<li class="dropdown-header">Dropdowns</li>
<li><a href="#">Example</a></li>
<li><a href="#">R</a></li>
<li><a href="#">Headers</a></li>
<li><a href="#">Q</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Button groups</li>
<li><a href="#">Basic example</a></li>
<li><a href="#">Button toolbar</a></li>
<li><a href="#">Sizing</a></li>
<li><a href="#">Nesting</a></li>
<li><a href="#">3</a></li>
<li class="divider"></li>
<li class="dropdown-header">2</li>
<li><a href="#">1</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Input groups</li>
<li><a href="#">Basic example</a></li>
<li><a href="#">Sizing</a></li>
<li><a href="#">Checkboxes and radio addons</a></li>
<li class="divider"></li>
<li class="dropdown-header">Navs</li>
<li><a href="#">Tabs</a></li>
<li><a href="#">Pills</a></li>
<li><a href="#">Justified</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Navbar</li>
<li><a href="#">Default navbar</a></li>
<li><a href="#">Buttons</a></li>
<li><a href="#">Text</a></li>
<li><a href="#">Non-nav links</a></li>
<li><a href="#">Component alignment</a></li>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
</ul>
</li>
</div>
</ul></li>
</ul>
</div>
</div>
#columnaColor-3{
background: #2e373c;
margin-right: -30px;
}
#top-header-navigation .collapse ul li:after{
content: '';
position: absolute;
top: 18px;
right: 0;
display: block;
height: 20px;
width: 1px;
opacity: .15;
background: rgba(0, 0, 0, 0.7);
/* background: linear-gradient(to top, rgba(0, 0, 0, 0), #000000, rgba(0, 0, 0, 0)); */
/* background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), #000000, rgba(0, 0, 0, 0)); */
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0), #000000, rgba(0, 0, 0, 0));
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0), #000000, rgba(0, 0, 0, 0));
background: -o-linear-gradient(top, rgba(0, 0, 0, 0), #000000, rgba(0, 0, 0, 0));
}
#top-header-navigation .collapse ul > li:before {
content: '';
position: absolute;
top: 18px;
right: -1px;
display: block;
height: 20px;
width: 1px;
opacity: .35;
background: rgba(255, 255, 255, 0.8);
background: linear-gradient(to top, rgba(0, 0, 0, 0), #ffffff, rgba(0, 0, 0, 0));
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), #ffffff, rgba(0, 0, 0, 0));
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0), #ffffff, rgba(0, 0, 0, 0));
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.01), #ffffff, rgba(255, 255, 255, 0.01));
background: -o-linear-gradient(top, rgba(0, 0, 0, 0), #ffffff, rgba(0, 0, 0, 0));
}
#menuEstatic .navbar-default {
color: #fff;
background-color: #ccc6c6;
border-color: #aca1a2;
}
#menuEstatic .navbar-default .navbar-nav>li>a {
color: #fff;
}
#menuEstatic .navbar-default .navbar-nav>.dropdown>a .caret {
border-top-color: #fff;
border-bottom-color: #fff;
}
#menuEstatic .navbar-default .navbar-brand {
color: #fff;
}
.menu-large {
position: static !important;
}
.megamenu {
padding: 20px 0px;
width: 100%;
}
#dropdownEstatic{
float: left;
width: 33.3%;
}
#submenu {
margin-bottom: 0px!important;
width: 100%;
padding-top: 5px;
}
.dropdownEstatic {
float: left;
width: 33.3%;
}
#menuEstaticoFlecha{
margin-top: 4px;
background: rgba(255,255,255,0.9);
opacity: 1!important;
}
#menuEstaticoFlecha::before,
#menuEstaticoFlecha::after {
border: none;
content: none;
}
