when div with absolute position is added cannot click on links

Question

I have menu on a page and div that is absolute positioned. The problem is that when this div is on a page, then I cannot click on any links in menu items.

When I remove this div (#left_border), then links are clickable again.

Why?

CSS:

 #left_border {     background-image: url(http://tax.allfaces.lv/templates/tax/images/ena.png);     background-position: 0 0;     background-repeat: no-repeat;     width: 1094px;     background-size: 100% auto;     position: absolute;     height: 850px;     left: -51px;    top: 0px; }   

HTML:

<div id="wrapper"> <div id="content">     <div id="left_border"></div>     <div id="left">         <div id="menu">             <ul class="menu">                 <li class="item-101 current active deeper parent"><a href="/">Home</a>                      <ul>                         <li class="item-107"><a href="/index.php/home/news">News</a>                          </li>                     </ul>                 </li>                 <li class="item-102 deeper parent"><a href="/index.php/merchants-shops">Merchants / Shops</a>                 </li>                                 </ul>         </div>     </div>        </div> 

Here you see, that you cannot click on menu items: http://jsfiddle.net/Dq6F4/

Answer 1

CSS - to unblock clicking add to #left_border class following statement:

pointer-events: none  

(it is cross-browser solution including >= IE11)

Here is source of this solution with more informations. I tested it on chrome, firefox and safari (macOs and iOS) and works :)

If you like this answer buy me a coffee