Css – Disabled dropdown menu items using twitter bootstrap


I use markup to display a dropdown menu using Twitter Bootstrap.

<ul class="nav pull-right">
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu <b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li><a href="#">Menu item 1...</a></li>
            <li class="divider"></li>
            <li><a href="#">Menu item 2...</a></li>
            <li><a href="#">Menu item 3</a></li>

I want to be able to make menu items appear disabled, i.e. no hover effect and probably a different text decoration to make the disabled state visible to the user.

What is the best way to accomplish this? Is there an exisisting bootstrap css class I can add to the <li> or <a> element?

Best Solution

When outputing the code for a disabled drop down, why not simply use :

<li class='disabled'>
  <a href="#">Menu</a>

You can always add the caret back if you still want it to appear.

Adding W3Schools Link