title: Bootstrap 5 Dropdown menu item color variants
body: <p>I want to create variants of Bootstrap 5 dropdown menu, and menu items with different color themes to use in different places without affecting one another.</p>
  <p>I know I need to override .<code>dropdown-menu</code> and <code>.dropdown-item</code> tags, and I did this to change the <code>dropdown-menu</code>. So, when I hover over an item that uses this tag, it changes color (but I cannot have a different menu with a different color scheme since this applies to all dropdown-menu).</p>
  <pre><code>.dropdown-menu &gt; li &gt; a:hover {
    background-image: none;
    background-color: #37393D;
    border-bottom: 2px solid;
    border-color: #D8D8D8;
  }
  </code></pre>
  <p>The below changes the dropdown menu items that are created using li and hyperlink for all items that use these class names and HTML components.</p>
  <pre><code>.dropdown-menu &gt; li &gt; a {
    background-image: none;
    background-color: #C3D4EB;
    border-bottom: 2px solid;
    border-color: #37393D;
  }
  </code></pre>
  <p>I am not sure how to create multiple variants and use it. e.g.</p>
  <pre><code>&lt;li class=&quot;nav-item dropdown&quot;&gt;
              &lt;a href=&quot;#&quot; id=&quot;bnblock&quot; class=&quot;dropdown-toggle button-light-blue&quot; role=&quot;button&quot; data-bs-toggle=&quot;dropdown&quot; aria-expanded=&quot;false&quot;&gt;
              Block&lt;/a&gt;
  
              &lt;ul class=&quot;dropdown-menu&quot; aria-labelledby=&quot;bnblock&quot;&gt;
                  {% for reason in lst_blacklist %}
                  &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; id=&quot;bnblockreason&quot; href=&quot;{{profile_membership.id}}-{{reason.id}}&quot;&gt;{{reason.title}}&lt;/a&gt;&lt;/li&gt;
              {% endfor %}
            &lt;/ul&gt;
          &lt;/li&gt;
  </code></pre>
  <p>Appreciate your help.</p>