Class disabled not working <li> tag

Question

i write a class disabled in li tag show disabled style but click the menu is run

<li class=" disabled"> <a class="ajax-link" href="#"><i class="glyphicon glyphicon-align-justify"></i><span> List Services</span></a></li>

why the menu inactive in class disable any way to disable the menu in this condition ,please help me, thanks in advance

Answer 1

CSS:

.disabled {
    pointer-events:none; //This makes it not clickable
    opacity:0.6;         //This grays it out to look disabled
}

add this to solve that issue !!!

Answer 2

The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants have pointer-events set to some other value.

Use this code:

.disabled a {
   pointer-events:none; 
   opacity:0.6;
}