css - 要素をマウスでクリックする奇妙な動作

Question

メニューがあるウェブサイトを作っていますが、問題は、オプションが含まれていない場合でもメニューが常に不透明であり、その中のオプションにカーソルを合わせると、マウスがこの下の要素をクリックできることに気付きます。メニュー、私はこれが起こらないようにしたいので、これが起こらないようにする方法は？

ご覧のとおり、メニューが開いていても、これら2つの丸いチェックマークをクリックできます。

編集：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;
}