Question

This feels like it should be very easy to do, but for some reason I’m having trouble. I’ve a fairly vanilla Superfish menu (just top line & drop downs, no sub-menus).

I’d like to disable one of the menu items without removing it from the menu. Handling the onClick is easy – just disregard the click if you selected the menu. The part that’s giving me trouble is indicating to the user that “this menu item is disabled”.

For example, I’d like the menu item “DISABLE ME” to be a different color, have a different background, etc.

I have a JSFiddle where I’m trying to set the color to red (or green, or whatever).

If JSFiddle dies, here’s the basics:

HTML:

<ul id="sample-menu-1" class="sf-menu">
    <li class="current">
        <a href="#a">menu item</a>
        <ul>
            <li>
                <a href="#aa">menu item</a>
            </li>
            <li class="current">
                <a href="#ab">menu item</a>
            </li>
            <li class='disableLI'>
                <a href="#">DISABLE ME</a>
            </li>
            <li>
                <a href="#">menu item</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">menu item</a>
    </li>
    <li>
        <a>menu item</a>
    </li>    
</ul>​

Here’s the vanilla Javascript:

$("ul.sf-menu").superfish();​

And here’s the not-working CSS:

.disableLI { color: red; }
.sf-menu, .disableLI { color : green; }

​

Answer 1

I think you just targeted the wrong element

http://jsfiddle.net/WUjQQ/1/

to make things simple

.disableLI a { color: red !important; }