SoFunction
Updated on 2025-02-28

How to change the Bootstrap drop-down menu to hover trigger

The Bootstrap drop-down menu needs to be opened by clicking by default. During the development of the management system, using hover instead of clicking can reduce one step of operation and be more user-friendly. Here is how to implement it:

<!DOCTYPE html>
<html>
  <head>
    <link href="/bootstrap/3.3.5/css/" rel="stylesheet">
    <script src="/jquery/2.1.4/"></script>
    <script src="/bootstrap/3.3.5/js/"></script>
    <script src="/bootstrap-hover-dropdown/2.0.10/"></script>
  </head>
  <body>
    <div class="dropdown">
  <button type="button" class="btn dropdown-toggle"  
   data-toggle="dropdown" data-hover="dropdown">
   theme
   <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
   <li role="presentation">
     <a role="menuitem" tabindex="-1" href="#">Java</a>
   </li>
   <li role="presentation">
     &lt;a role="menuitem" tabindex="-1" href="#">Data Mining</a>   &lt;/li&gt;
   &lt;li role="presentation"&gt;
     &lt;a role="menuitem" tabindex="-1" href="#"&gt;
      Data communication/network
     &lt;/a&gt;
   &lt;/li&gt;
   &lt;li role="presentation" class="divider"&gt;&lt;/li&gt;
   &lt;li role="presentation"&gt;
     &lt;a role="menuitem" tabindex="-1" href="#">Disassociated Links</a>   &lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.