I am attempting to construct a food selection with 2 degrees. It functions like any kind of various other food selection: when you float over navigating food selection product, an unordered checklist of submenus opens up. Nonetheless, when I relocate the reminder to the right, as quickly as it gets to the upright scrollbar, the submenu goes away. I can merely utilize “overflow-y: vehicle” as well as no webkit-scrollbar, yet after that I can not design the scrollbar.
Exists any kind of means to have a styled scrollbar as well as still have the ability to get to the submenu without it vanishing?
It can be carried out in JS, jQuery, SCSS– any kind of option rates.
The code is straightforward:
<< ul course=" dropdown-menu">
<> < li course=" dropdown-item dropdown">>.
Food selection product 1.
<< ul course=" dropdown-menu dropdown-children">>.
<< li course=" dropdown-item">
<> < a href="/ node/23">> Submenu product 1<.
<.
<< li course=" dropdown-item">
<> < a href="/ node/23">> Submenu product 2<.
<.
<.
<.
<< li course=" dropdown-item dropdown">>.
Food selection product 2.
<< ul course=" dropdown-menu dropdown-children">>.
<< li course=" dropdown-item">
<> < a href="/ node/23">> Submenu product 1<.
<.
<< li course=" dropdown-item">
<> < a href="/ node/23">> Submenu product 2<.
<.
<.
<.
<.
as well as scss for designing:
dropdown-menu {
min-height: 4rem;
overflow-y: vehicle;.
overflow-x: concealed;.
white-space: nowrap;.
&&::- webkit-scrollbar {
size: 8px;.} &::- webkit-scrollbar-track {
history: #F 2F2F2;.
border-radius: 10px;.
}
&&::- webkit-scrollbar-thumb {
history: # 0039FF;.
border-radius: 10px;.
}
}
