How to make use of it:

1. Insert the Bart Dropdown plugin’s script after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.bart.dropdown.js"></script>

2. Insert your HTML list along with a toggle button into the dropdown container.

<div class="dropdown">
  <button type="button">Basic Dropdown</button>
  <ul>
    <li><a href="#">item 1</a></li>
    <li><a href="#">item 2</a></li>
    <li><a href="#">item 3</a></li>
    <li><a href="#">item 4</a></li>
    <li><a href="#">item 5</a></li>
  </ul>
</div>

3. Initialize the dropdown plugin and accomplished.

$(function(){
  $('.dropdown').dropdown();
});

4. Set the trigger occasion.

<div class="dropdown" data-trigger="over">
  ...
</div>

// OR Via JavaScript
$('.dropdown').dropdown({
  trigger: "over"
});

5. Determine whether to point out the dropdown on web page load.

<div class="dropdown" data-show="true">
  ...
</div>

// OR Via JavaScript
$('.dropdown').dropdown({
  show: true
});

6. More configuration choices. Note that the next choices will also be handed through HTML data-OPTION attribute:

$('.dropdown').dropdown({
  bgColor: "#fff",
  border: "1px solid #ddd",
  padding: "0.25rem",
  zIndex: 99,
  itemBgColor: "#fff",
  itemOverBgColor: "#3b82f6",
  itemColor: "#000",
  itemOverColor: "#fff",
});

7. Trigger a function when a listing item is clicked:

$('.dropdown').dropdown({
  callback: (idx, ele) => {
    alert('index: ' + idx +  ', text: ' + $(ele).text())
  }
});

SEO-Friendly Select-style Dropdown Plugin, jquery.bart.dropdown Github, jqueryscript net dropdown combo tree, add css to select option jquery

See Demo And Download