鼠标在元素中单击的奇怪行为

Question

我正在制作一个有菜单的网站，但问题是菜单总是有不透明度，即使没有包含选项，当我将鼠标悬停在选项中时，我注意到鼠标可以点击此菜单下的某个元素，我不希望发生这种情况，以防止这种情况发生？

如您所见，即使菜单已打开，仍然可以点击这两个圆形复选标记。

修改 原来是position:absolute;导致了这个问题，我不知道为什么会这样。其实我甚至都不确定。还在等待答案。

并且结果表明页面中position:absolute;的任何元素都表现相同！

<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>

这就是它的造型：

//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;
}