Помощь в дополнение выпадающего меню.
 

Здравствуйте! Имеется выпадающее горизонтальное меню на сайте которое открывается и закрывается по клику, вот скрипт:
$(function() {
/* Открывание */
$('.cat-menu-btn').live('click', function () {
$(this).parents('.nav').find('.cat-menu-list').toggle();
return false;
});
$('.cat-menu-btn1').live('click', function () {
$(this).parents('.nav').find('.cat-menu-list1').toggle();
return false;
});

/* Меню */
$('.wrap > .nav-btn').live('click', function () {
$(this).parents('.wrap').find('.nav').toggle();
return false;
});

/* Закрытие */
$(document).on('click', function(e) {
if (!$(e.target).parents().hasClass('header>wrap')) {
$('.cat-menu-list').hide();
}
if (!$(e.target).parents().hasClass('header>wrap')) {
$('.cat-menu-list1').hide();
}
});
});

Вот в чем проблема если сделать больше вкладок .cat-menu-btn2, .cat-menu-btn3 и т.д то при открытие они просто накладываются друг на друга беграундом если стоят рядом и смотрится совсем не красиво. Можно ли сделать что бы меню .cat-menu-btn закрывалось при нажатие на другое меню .cat-menu-btn1 и т.д. или при нажатие на другой <div>. Или закрывалось при покидание элеманта .cat-menu-list мышкой. Может есть еще какие нибудь варианты просто если сделать hover на css при просмотре на мониторе смотрится отлично, но при работе на мобильных устройствах это не удобно.

Это не связано с проблемой, ее надо решать средствами CSS, но:

$(document).on('click', function(e) - начиная с jQuery 1.7
и
$('.wrap > .nav-btn').live('click', function () - начиная с jQuery > 1.7 метод считается устаревшим, в версиях выше вообще не поддерживается.