How to color different elements in dropdown with different colors?

Question

css

The problem was described in the drop-down lists in the example
https://jsfiddle.net/dqvg7ph1/1/

There is a badge. It inside the dropdown-item, when hovered (on the entire dropdown-item, not on the element) should be colored with a blue background and white numbers. At the same time, the text above should not disappear behind a blue background (this is in case you change the dropdown classes). Now the badge circle is hiding behind a blue background and this is the problem. In general, it is difficult to explain in words) it will hardly be clear. It is better to poke an example. Thank you.

Answer 1

.dropdown-item:hover {
  background-color: blue;
  color: white;
}

.dropdown-item:hover .badge {
  background-color: white;
  color: blue;
}