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

Здравствуйте! Имеется выпадающее горизонтальное меню на сайте которое открывается и закрывается по клику, вот скрипт:

$(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 при просмотре на мониторе смотрится отлично, но при работе на мобильных устройствах это не удобно.