Вот HTML
<div class="flex">
<a href="#" class="chart_tab"><span>30 дней</span><span data-tab-dropdownmenu = "tab_menu_1" class="dropdown_btn_3"></span></a>
</div>
<div class="tab_menu" data-dropdownmenu = "tab_menu_1">
<ul>
<li><a href="#">10 дней</a></li>
<li><a href="#">20 дней</a></li>
<li><a href="#">30 дней</a></li>
<li><a href="#">40 дней</a></li>
</ul>
</div>
Вот CSS
.dropdown_btn_3 {
display: block;
width: 14px;
height: 9px;
cursor: pointer;
}
.chart_tab .dropdown_btn_3 {
position: absolute;
top: 50%;
right: 15px;
transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
z-index: 3;
}
.tab_menu {
display: none;
width: 80px;
margin-top: 10px;
padding: 10px 10px;
position: absolute;
top: 100%;
left: 0;
z-index: 3;
}
.tab_menu.visible {
display: block;
}
Вот JQuery
$("[data-tab-dropdownmenu]").on("mouseover", function() {
menu = $("[data-dropdownmenu = '"+$(this).attr("data-tab-dropdownmenu")+"']");
topCoord = $(this).offset().top + 12;
leftCoord = $(this).offset().left - 70;
menu.addClass("visible");
menu.offset({top: topCoord, left: leftCoord});
});
$("[data-tab-dropdownmenu]").on("mouseleave", function() {
menu = $("[data-dropdownmenu = '"+$(this).attr("data-tab-dropdownmenu")+"']");
leftCoord = -$(window).width()*2;
menu.offset({left: leftCoord});
menu.removeClass("visible");
});
Контейнер .flex имеет определенную высоту и она меньше чем высота меню .tab_menu. Контейнер .flex имеет свойство overflow:hidden.
Поэтому нужно при наведении на .dropdown_btn_3 это меню спозиционировать и убрать его только при уведении курсора от .dropdown_btn_3 и .chart_tab. Также если курсор на меню .tab_menu, то меню тоже не должно убираться.
Как это сделать?