<ul class="menu">
<li class="active"><a href="#">Главная</a></li>
<li class="dropdown"><a href="#" class="dropdown">Продукция</a>
<div class="dropdown-block">
<div class="catalog_box">
<div class="item_info">
<a class="item_link_title" href="#">ПРОДУКЦИЯ</a>
<ul class="item_info_list">
<li><a href="#">Товар 1</a></li>
<li><a href="#">Товар 2</a></li>
<li><a href="#">Товар 3</a></li>
</ul>
</div>
</div>
</div>
<a class="mean-expand" href="#">+</a>
</li>
</ul>
ul.menu > li{
float: left;
padding: 0 0 0 29px;
}
ul.menu{
padding:0px;
list-style:none;
}
.dropdown-block {
position: absolute;
box-shadow: 0 7px 5px -5px rgba(0, 0, 0, 0.3);
background: #f6f7f9;
width: 100%;
left: 0;
opacity: 0;
visibility: hidden;
display: none;
padding:10px;
}
.drop .dropdown-block {
opacity: 1;
visibility: visible;
display: block;
}
$(".dropdown > a").click(function (event) {
event.preventDefault();
$(this).parent().toggleClass("drop");
return false;
});
$(document).click(function (e){
var div = $(".dropdown-block");
if (!div.is(e.target) && div.has(e.target).length === 0) {
div.parent().removeClass("drop");
}
});
/*
//nav dropdown category
$(".dropdown > a").click(function (event) {
event.preventDefault();
if ($(this).parent().hasClass("drop")) {
$(this).parent().removeClass("drop");
} else {
$(this).parent().addClass("drop");
}
});
$(document).mouseup(function (e){
var div = $(".dropdown-block");
if (!div.is(e.target)
&& div.has(e.target).length === 0) {
div.parent().removeClass("drop");
}
});*/
This Pen doesn't use any external CSS resources.