CSS 主菜单不会悬停，因为下面的超链接

问：

我有一些CSS，我在我的网站上找到并用于我的主菜单，效果很好。但是，当位于菜单悬停下方的消息通知超链接图像可见时，当您移动鼠标时，悬停菜单会迅速消失，因为它正在拾取下面的超链接。我已经弄清楚了指针事件：无;会使消息通知不可点击，然后悬停菜单起作用，但通知超链接需要可点击。

我已经在某些地方尝试过 z-index，但是有容器和其他事情需要处理，所以我认为一个可能的解决方案是以某种方式将 pointer-events：none 应用于悬停发生时的通知 Div？

我使用 vb.net 进行编码。

 <div style="float:left; margin-left:338px; margin-top:-30px; " runat="server" id="notificationsDiv"><asp:HyperLink ID="hypNotifications" runat="server" Visible="false" NavigateUrl="~/Account/messageList.aspx"><asp:Image ID="imgNotifications" runat="server" Visible="false" ImageAlign="Middle" ImageUrl="~/files/images/icons/yesmessages.png" /></asp:HyperLink></div>

主菜单 CSS 在单独的布局 .CSS 文件中

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border- 
 box;margin:0;padding:0; }
.clr{clear:both;}

#mainNav {
  background-color:#8BC28B;
  font-size:0;
  text-align:center;
  width:100%;
}

#mainNav ul {font-size:11px; }
#mainNav i {font-size:3em;}
#mainNav li {display:inline-block; height:inherit;}

#mainNav a {
    color:#fff;
    font-family:'Open Sans', Tahoma, Sans-Serif;
    font-size: 1.2em;
    display:block;
    height:inherit;
    margin:0;
    padding:0.75em 0.75em;
    text-decoration:none;
}

#mainNav a:hover {
    background-color:#DF7764; transition: background .25s ease; 
}

#mainNav li .sub-menu {
    background-color:#900;
    position:absolute;
    left:-9999px;
    opacity:0;
    transition: opacity .75s;
    width:100%;
    z-index:10;
}

#mainNav li:hover .sub-menu {
    left:0px;
    opacity:1;
}

#mainNav .sub-menu i {font-size:1em;}

#mainNav .sub-menu a {
    height:3em; line-height:3em;
    padding:0 1em; 
    height:inherit;
    width:100%;
} 

#mainNav .sub-menu a:hover {background-color:#f60;}