<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"); 
		}
	});*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js