I have a menu with some links
<ul id="nav">
<li>
<a href="#">Project</a>
<div class="subs">
<div>
<ul>
<li>
<h3>Save</h3>
<ul>
<li>
<a id="save_canvas" href="#" class='disabled'>Save to File</a>
</li>
<li>
<a id="save_canvas_as" href="#">Save as</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</li>
The css code for the hover effect is shown below:
#nav li ul ul li a:hover {
background-color: #0060a6;
color: #fff;
}
Is there a way to disable the hover effect for a specific menu item, such as "Save to File"? I attempted to assign it a 'disabled' class with the following styles:
.disabled {
filter: alpha(opacity=30);
-moz-opacity:0.3;
opacity: 0.3;
}
.disabled a:hover{
background-color: none !important;
}
However, this approach does not seem to work..... Thank you!