Strange behavior of mouse clicking through an element - css

Question

I'm making a website where there's a menu, but the problem is that menu always has opacity even when the option is not included, and when i hover over an option in it, i notice that the mouse can click on some element beneath this menu, i don't want this to happen so how to prevent this from happening ?
As you see those two rounded check marks still can be clicked even if the menu is open.
EDIT:
It turned out to be position:absolute; that causes this problem, i have no idea why is that. Actually i'm not even sure about that. Still waiting for an answer.
And turned out too that any element in the page that has position:absolute; behaves the same!
<div class="mainTaskWrapper clearfix">
<!-- All ID names are to be changed later on -->
<div class="mainMarker"></div>
<label for="task1">This is task1</label>
<!-- holder, checkButton and optTrigger are the underneath elements -->
<div class="holder"></div>
<div class="subTrigger"></div>
<div class="checkButton"></div>
<div class="optTrigger"></div>
<!-- the following is for the drop-down menu -->
<div class="mainOptions">
<ul>
<li id="mainInfo">Details</li>
<li id="mainDivide">Divide</li>
<li id="mainEdit">Edit</li>
<li id="mainDelete">Delete</li>
</ul>
</div>
</div>
And that's the styling of it :
//This is for the tick buttons underneath the drop-down menu
div.holder , div.checkButton, div.optTrigger {
display: inline-block;
opacity: 0.2;
height: 20px;
width: 20px;
float:right;
margin-top: 0px;
margin-left:5px;
cursor: pointer;
}
div.checkButton {
background: url('../img/check_checked.png') no-repeat center;
}
div.checkButton:hover {
opacity: 1.0;
}
div.optTrigger {
background: url('../img/toggle_down_light.png') no-repeat center;
}
div.optTrigger:hover{
opacity: 1.0;
}
div.optTrigger.active{
opacity: 0.9;
border-radius: 5px 5px 0px 0px;
background: url('../img/toggle_down_light_opened.png') no-repeat center darkslategray;
}
div.holder {
opacity: 1.0;
background: url('../img/holder.png') no-repeat center;
cursor: move;
}
//The following is for the drop-down menu
.mainOptions {
display:inline-block;
position:absolute;
background : darkslategrey;
opacity: 1.0;
left : 626px;
top:25px;
border-radius: 5px 0px 5px 5px;
}
.mainOptions li {
color : lightgrey;
border-bottom: 1px solid grey;
padding:5px 15px;
font-size : 12px;
cursor:pointer;
}
.mainOptions li:hover {
background : grey;
}
.mainOptions li:last-of-type:hover{
border-radius: 0px 0px 5px 5px;
}
.mainOptions li:first-of-type:hover{
border-radius: 5px 0px 0px 0px;
}
.mainOptions li:last-of-type{
border:none;
}