title: Disabled dropdown menu items using twitter bootstrap
body: <p>I use markup to display a dropdown menu using <a href="http://twitter.github.com/bootstrap/javascript.html#dropdowns" rel="noreferrer">Twitter Bootstrap</a>.</p>
  
  <pre><code>&lt;ul class="nav pull-right"&gt;
      &lt;li class="dropdown"&gt;
          &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Menu &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
          &lt;ul class="dropdown-menu"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Menu item 1...&lt;/a&gt;&lt;/li&gt;
              &lt;li class="divider"&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Menu item 2...&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Menu item 3&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>What is the best way to accomplish this? Is there an exisisting bootstrap css class I can add to the <code>&lt;li&gt;</code> or <code>&lt;a&gt;</code> element?</p>