helgajijka,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.active-menu-item{background: #FFE4B5;}
div.menu-mega{display:none; width:600px;height:200px;}
div.menu-main-item{display:block; width:200px; height:100px; border:1px solid #333;}
#menu-restoran{background-color: green}
#menu-trade{background-color: pink}
#menu-equipment{background-color: blue}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
var $but = $(".menu-main-item"),
$blocks = $(".menu-mega");
$but.each(function(i, elem) {
var $el = $(elem);
$el.click(function() {
$but.not($el).removeClass("active-menu-item");
$el.toggleClass("active-menu-item");
$blocks.filter(function(j, el) {
i == j && $(el).slideToggle();
return i != j
}).slideUp();
})
});
$('html').click(function (event) {
if ($(event.target).closest('.menu-main-item, .menu-mega' ).size()) return;
$but.filter('.active-menu-item').click()
});
});
</script>
</head>
<body>
<!--использую navbar bootstrap -->
<ul class="menu-main-nav">
<li><a class="menu-main-item" href="#" data-item="menu-restoran">Для ресторанов<i class="main-choise"></i></a></li>
<li><a class="menu-main-item" href="#" data-item="menu-trade">Для торговли<i class="main-choise"></i></a></li>
<li><a class="menu-main-item" href="#" data-item="menu-equipment">Торговое оборудование<i class="main-choise"></i></a></li>
</ul>
<!--Блок выпадающего мегаменю</i> -->
<div class="menu-mega" id="menu-restoran">
test 1
</div>
<!-- тут дальше еще три блока -->
<div class="menu-mega" id="menu-trade">
test 2
</div>
<div class="menu-mega" id="menu-equipment">
test 3
</div>
</body>
</html>