title: Drop-down menu class in bootstrap-multiselect.js interfering with my custom dropdown-menu class
body: <p>The following css from my custom.css file builds on the core boostrap css and has the class dropdown-menu. This class is in conflict with the dropdown-menu class in the davidstutz/bootstrap-multiselect.js file which also uses the core bootstrap css dropdown-menu class. </p>
  
  <p>Is there a way to make the custom.css dropdown-menu class more selective as not to affect the bootstrap-multiselect elements without using an id? I can't use id because I have multiple dropdown-menus on the same page.</p>
  
  <p>The section of custom.css that inteferes:</p>
  
  <pre><code>.dropdown-menu {
      background-color: #EEEEEE;
      border: 1px solid #D6D6D6;
      border-top-color: #EEEEEE;
      border-radius: 0px;
      -webkit-box-shadow: none;
      box-shadow: none;
  }
  .dropdown-menu &gt; li &gt; a {
      color: #515151;
      padding: 10px 20px;
      font-size: 12px;
  }
  .dropdown-menu &gt; li &gt; a:hover,
  .dropdown-menu &gt; li &gt; a:focus {
      color: #FFF;
      background-color: #515151;
  }
  </code></pre>
  
  <p>davidstutz/bootstrap-multiselect - bootstrap-multiselect.js:</p>
  
  <pre><code>templates: {              
              button: '&lt;button type="button" class="multiselect dropdown-toggle" data-toggle="dropdown"&gt;&lt;/button&gt;',
                  ul: '&lt;ul class="multiselect-container dropdown-menu"&gt;&lt;/ul&gt;',                
              filter: '&lt;li class="multiselect-item filter"&gt;&lt;div class="input-group"&gt;&lt;span class="input-group-addon"&gt;&lt;i class="glyphicon glyphicon-search"&gt;&lt;/i&gt;&lt;/span&gt;&lt;input class="form-control multiselect-search" type="text"&gt;&lt;/div&gt;&lt;/li&gt;',                
                  li: '&lt;li&gt;&lt;a href="javascript:void(0);"&gt;&lt;label&gt;&lt;/label&gt;&lt;/a&gt;&lt;/li&gt;',                
              divider: '&lt;li class="multiselect-item divider"&gt;&lt;/li&gt;',                
              liGroup: '&lt;li class="multiselect-item group"&gt;&lt;label class="multiselect-group"&gt;&lt;/label&gt;&lt;/li&gt;'            
          } 
  </code></pre>
  
  <p>dropdown menu html:</p>
  
  <pre><code>&lt;ul class="dropdown-menu"&gt;
      &lt;li&gt;&lt;a href="../about-us.html"&gt;About Us&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="../blog.html"&gt;Blog&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="../blog-timeline.html"&gt;Blog Timeline&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>multiselect html:</p>
  
  <pre><code>&lt;select class="multiselect" multiple="multiple"&gt;
      &lt;option value="cheese"&gt;Cheese&lt;/option&gt;
      &lt;option value="tomatoes"&gt;Tomatoes&lt;/option&gt;
      &lt;option value="mozarella"&gt;Mozzarella&lt;/option&gt;
  &lt;/select&gt;   
  </code></pre>