title: My li:hover does not react as expected?
body: <p><a href="http://jsfiddle.net/AeaD9/1/" rel="nofollow noreferrer">Here's a Fiddle</a></p>
  
  <p>The element normally has an underline. I want for that underline to be completely hidden when the mouse is anywhere in the opaque "cloud" that appears when the cursor is over the element.</p>
  
  <p>The underline is applied as a <code>border-bottom</code> of the parent div as shown below:</p>
  
  <pre><code>.element_style{
      width:98%;
      line-height:40px;
      font-family: 'Lato';
      font-weight: 300;
      font-size:18px;
  
      /*Order at the bottom*/
      border-bottom: 1px solid rgba(0, 0, 0, 0.18);   
  
      position:relative;
  }
  </code></pre>
  
  <p>However you will notice that if you go down slowly in the element, to just below where the underline should be, you will notice the underline appear again like so <img src="https://i.stack.imgur.com/MNPN2.png" alt="enter image description here"></p>
  
  <p>I was unable to fix this behaviour, how can I approach going about doing so?</p>