Transparent background scrollbar displays on top of content

I want to achieve this:

What I already achieve:
https://plnkr.co/edit/a3XfJo6Fxtru9V5zpVYR?p=preview

.dropdown-menu { //container
    overflow-y: overlay;
    background-color: transparent;
}
.dropdown-menu::-webkit-scrollbar {
    width:10px;
}
.dropdown-menu::-webkit-scrollbar * {
    background:transparent;
}
.dropdown-menu::-webkit-scrollbar-thumb {
    background:$blue !important;
    border-radius: 6px;
}

Does someone have any ideas how I can do that? How can I make the items stay between their container and the container's scrollbar so they looks like the design? I tried putting z-index in the elements but seems not to work.