How to make container div "pointer-events:none" but content clickable...?

i have some setup... where tool tip appears on hover... so i have to put tool tip and anchor tags in same div... tool tips pointer events set to none.. but i cant set pointer events of container div to none because then Hover event is not detected... but i want the underlying element below tool tip to be clickable... please help me out (if possible) without java script... i have set up the dummy scenario below... also including code pen link.... and yeah... positions are not changeable...in my case the underlying div is partially visible as shown in this code below.. and i want it to be clickable/ fire alert function... yeah if there is other way by changing composition of UN-ordered list.. and separating it from that container please let me know... but tool tip should be visible on hover on switch...

        <html>

        <head>

    <style>


    .menudescription{
       float: left;
        width: 150px;
        height: 30px;

        text-align: center;
        background-color: #A1BA94;


        margin: 20px 0px 0px 12px;

        font-size: 20px;
        line-height: 25px;
        font-family: 'Kaushan Script', cursive;
        color: white;
        border: solid white 2px;
        opacity: 0;
        pointer-events: none;

    }

    ul li {
        list-style-type:none
    }


    #menulist{
        clear: both;
        width: 230px;
        height: 342px;
        position: fixed;
        right: 0;
        top: 5%;
        z-index: 1000;


    }



    .menulistitem{
        clear: both;
        height: 60px;
            width: 60px;
        float: right;
        position: relative;
        text-align: center;
        vertical-align: middle;
        background-color: #A1BA94;
        margin: 2px;
        padding-top: 4px;

    }

    .menulistitem:hover + .menudescription{
        opacity: 1;
    }


    .underlyingdiv{
        height:200px;
        width:50px;
        background-color:red;
        position:relative;
        float:right;
        margin:20px 40px;
        display:block;


    }




        </style>


            </head>
    <body>
    <div id="navbar">
        <ul id="menulist">

           <li><div class="menulistitem" id="menuitem_showreel"><a href="#">switch
                </a></div> <div class="menudescription">tooltip</div></li>

           <li><div class="menulistitem" id="menuitem_showreel"><a href="#">switch
                </a></div> <div class="menudescription">tooltip</div></li>

           <li><div class="menulistitem" id="menuitem_showreel"><a href="#">switch
                    </a></div> <div class="menudescription">tooltip</div></li></ul>
        </div>

    <div class="underlyingdiv" onClick="myfunction()"></div>




        <script>
        function myfunction(){
        alert("hello");
    }
        </script>

        </body>
    </html>

below is the code pen link...

http://codepen.io/theprash/pen/MKwWoN

Solution

.menudescription {
  width: 150px;
  height: 30px;
  text-align: center;
  background-color: #A1BA94;
  position: absolute;
  right: 100%;
  top: 0;
  margin: 20px 0px 0px 12px;
  font-size: 20px;
  line-height: 25px;
  font-family: 'Kaushan Script', cursive;
  color: white;
  border: solid white 2px;
  opacity: 0;
  pointer-events: none;
}

ul li {
  list-style-type: none;
  position: relative;
}

#menulist {
  clear: both;
  width: 60px;
  height: 342px;
  position: fixed;
  right: 0;
  top: 5%;
  z-index: 1000;
  padding-left: 0;
}

.menulistitem {
  height: 60px;
  position: relative;
  text-align: center;
  vertical-align: middle;
  background-color: #A1BA94;
  margin: 2px;
  padding-top: 4px;
}

.menulistitem:hover+.menudescription {
  opacity: 1;
}

.underlyingdiv {
  height: 200px;
  width: 50px;
  background-color: red;
  position: relative;
  float: right;
  margin: 20px 40px;
  display: block;
}

<body>
  <div id="navbar">
    <ul id="menulist">

      <li>
        <div class="menulistitem" id="menuitem_showreel"><a href="#">switch
            </a></div>
        <div class="menudescription">tooltip</div>
      </li>

      <li>
        <div class="menulistitem" id="menuitem_showreel"><a href="#">switch
            </a></div>
        <div class="menudescription">tooltip</div>
      </li>

      <li>
        <div class="menulistitem" id="menuitem_showreel"><a href="#">switch
                </a></div>
        <div class="menudescription">tooltip</div>
      </li>
    </ul>
  </div>

  <div class="underlyingdiv" onClick="myfunction()"></div>
</body>

The red container is clickable and the tooltip is visible on hover.

Things I do:

Added position:relative to li.
Removed floats to divs inside lis added below css to .menudescription
```
   position: absolute;
   right: 100%;
   top: 0;
```

This will help to position the tooltip relative to li

Override the width of #menulist to 60px and remove padding-left for the same. This will make sure that the red container is clickable.

Working Code pen