Hi, i'm new here. And just wanna say i kinda like this site a lot, the design, the content, everything is pretty nice here.
I'm a beginner in CSS, and making a site. But the problem is, i have a div with position:absolute; and this box has several elements underneath it.

When i move the mouse in this div, i see that it interacts with the elements underneath it ! (I got those element cursor property set to pointer, so the mouse changes to pointer).

Why is that happening and how to prevent it from happening ?

Here's a screenshot of the problem :


Here's the code :

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

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