Link behind dropdown is clickable, rather than the dropdown being solid

Question

I have a dropdown, when I hover over it opens fine, but the links behind the dropdown are still visible and clickable causing me trouble as you can see in the gif below

My css for the dropdown:

.os-dropdown {
    background-color: #047bf8;
    color: #fff;
    padding: 10px 20px;
    position: absolute;
    z-index: 999;
    bottom: 0px;
    right: 100px;
    visibility: hidden;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    -webkit-transform: translate(99%, 115%);
    transform: translate(99%, 115%);
    opacity: 0;
    border-radius: 6px;
    -webkit-box-shadow: 0px 5px 25px 0px rgba(4, 123, 248, 0.5);
    box-shadow: 0px 5px 25px 0px rgba(4, 123, 248, 0.5);
    overflow: hidden;
    font-size: .9rem;
    text-align: left;
}


.os-dropdown ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    position: relative;
    display: block;
}

My html for the dropdown is like so:

<div class="pipeline-settings os-dropdown-trigger">
    <i class="os-icon os-icon-hamburger-menu-1"></i>
    <div class="os-dropdown">
        <div class="icon-w">
            <i class="os-icon os-icon-ui-46"></i>
        </div>
        <ul style="">
            <li>
                <a href="http://help.mysite.com/tickets/9" target="_blank" class="">
                    <i class="fa fa-eye"></i> View
                </a>
            </li>
            <li>
                <a class="genericmodal" data-url="http://help.mysite.com/tickets/9/edit" data-title="Edit entry" data-toggle="modal" data-target="#genericModal">
                    <i class="fa fa-pencil"></i> Edit
                </a>
            </li>
            <li>
                <a data-id="9" data-url="http://help.mysite.com/tickets/9" data-type="tickets" data-toggle="modal" data-target="#deleteEntry" class="entryDetails">
                    <i class="fa fa-trash"></i> Delete Tickets
                </a>
            </li>
        </ul>
    </div>
</div>

and to activate the dropdown I am doing the following:

    $('.os-dropdown-trigger').on('mouseenter', function() {
        $(this).addClass('over');
    });
    $('.os-dropdown-trigger').on('mouseleave', function() {
        $(this).removeClass('over');
    });

How can I fix the problem, so the buttons in the background don't interact with my dropdown?

Answer 1

You could use pointer-events:none; like :

.parent .os-dropdown {
   pointer-events:none;
}
.parent:hover .os-dropdown {
   pointer-events:auto;
}

Try something like :

.os-dropdown ul {
    z-index:1000; /* should be ok with an upper value than the next parent one */
    list-style: none;
    margin: 0px;
    padding: 0px;
    position: relative;
    display: block;
}

Answer 2

Try setting a position of absoulte or fixed then add z-index to .os-dropdown ul so its z-index is above the os-dropdown class.

.os-dropdown {
background-color: #047bf8;
color: #fff;
padding: 10px 20px;
position: absolute;
z-index: 50;
bottom: 0px;
right: 100px;
visibility: hidden;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
-webkit-transform: translate(99%, 115%);
transform: translate(99%, 115%);
opacity: 0;
border-radius: 6px;
-webkit-box-shadow: 0px 5px 25px 0px rgba(4, 123, 248, 0.5);
box-shadow: 0px 5px 25px 0px rgba(4, 123, 248, 0.5);
overflow: hidden;
font-size: .9rem;
text-align: left;
}


.os-dropdown ul {
list-style: none;
margin: 0px;
padding: 0px;
position: absolute; //or try position:fixed.
z-index:60;
display: block;
}