How to make Twitter Bootstrap menu dropdown on hover rather than click

Question

I d like to have my Bootstrap menu automatically drop down on hover  rather than having to click the menu title  I d also like to lose the little arrows next to the menu titles

User · Answer

For the caret    I haven t seen any one specifying simple CSS that totally blocks the caret   Here you go    caret       display  none  important

User · Answer

This should hide the drop downs and their carets if they are smaller than a tablet    media  max-width  768px         navbar ul dropdown-menu   navbar li dropdown b caret           display  none

User · Answer

In my opinion the best way is like this     function    window  undefined           Outside the scope of the jQuery plugin to        keep track of all dropdowns     var  allDropdowns                If instantlyCloseOthers is true  then it will instantly        shut other nav items when a new one is hovered over       fn dropdownHover   function options                The element we really care about            is the dropdown-toggle s parent          allDropdowns    allDropdowns add this parent              return this each function                 var  this     this                    parent    this parent                    defaults                         delay  500                      instantlyCloseOthers  true                                    data                         delay    this  data  delay                        instantlyCloseOthers    this  data  close-others                                      settings     extend true      defaults  options  data                   timeout                parent hover function event                        So a neighbor can t open the dropdown                 if   parent hasClass  open    amp  amp    this is event target                         return true                                     if settings instantlyCloseOthers     true                       allDropdowns removeClass  open                     window clearTimeout timeout                    parent addClass  open                   function                     timeout   window setTimeout function                          parent removeClass  open                       settings delay                                   This helps with button groups               this hover function                     if settings instantlyCloseOthers     true                       allDropdowns removeClass  open                     window clearTimeout timeout                    parent addClass  open                                    Handle submenus              parent find   dropdown-submenu   each function                    var  this     this                   var subTimeout                   this hover function                         window clearTimeout subTimeout                        this children   dropdown-menu   show                            Always close submenu siblings instantly                      this siblings   children   dropdown-menu   hide                       function                         var  submenu    this children   dropdown-menu                        subTimeout   window setTimeout function                              submenu hide                           settings delay                                                                 document  ready function                apply dropdownHover to all elements with the data-hover  dropdown  attribute             data-hover  dropdown     dropdownHover               jQuery  this     Sample markup    lt li class  dropdown  gt       lt a href     class  dropdown-toggle  data-toggle  dropdown  data-hover  dropdown  data-delay  1000  data-close-others  false  gt          Account  lt b class  caret  gt  lt  b gt       lt  a gt       lt ul class  dropdown-menu  gt           lt li gt  lt a tabindex  -1  href     gt My Account lt  a gt  lt  li gt           lt li class  divider  gt  lt  li gt           lt li gt  lt a tabindex  -1  href     gt Change Email lt  a gt  lt  li gt           lt li gt  lt a tabindex  -1  href     gt Change Password lt  a gt  lt  li gt           lt li class  divider  gt  lt  li gt           lt li gt  lt a tabindex  -1  href     gt Logout lt  a gt  lt  li gt       lt  ul gt   lt  li gt

User · Answer

Here is the JSFiddle -  https   jsfiddle net PRkonsult mn31qf0p 1   The JavaScript bit at the bottom is what does the actual magic   HTML   lt  --http   getbootstrap com components  navbar-- gt   lt div class  body-wrap  gt     lt div class  container  gt       lt nav class  navbar navbar-inverse  role  navigation  gt         lt div class  container-fluid  gt           lt  -- Brand and toggle get grouped for better mobile display -- gt           lt div class  navbar-header  gt             lt button type  button  class  navbar-toggle  data-toggle  collapse  data-target   bs-example-navbar-collapse-1  gt               lt span class  sr-only  gt Toggle navigation lt  span gt               lt span class  icon-bar  gt  lt  span gt               lt span class  icon-bar  gt  lt  span gt               lt span class  icon-bar  gt  lt  span gt             lt  button gt             lt a class  navbar-brand  href     gt Brand lt  a gt           lt  div gt            lt  -- Collect the nav links  forms  and other content for toggling -- gt           lt div class  collapse navbar-collapse  id  bs-example-navbar-collapse-1  gt             lt ul class  nav navbar-nav  gt               lt li class  active  gt  lt a href     gt Link lt  a gt  lt  li gt               lt li gt  lt a href     gt Link lt  a gt  lt  li gt               lt li class  dropdown  gt                 lt a href     class  dropdown-toggle  data-toggle  dropdown  gt Dropdown  lt b class  caret  gt  lt  b gt  lt  a gt                 lt ul class  dropdown-menu  gt                   lt li gt  lt a href     gt Action lt  a gt  lt  li gt                   lt li gt  lt a href     gt Another action lt  a gt  lt  li gt                   lt li gt  lt a href     gt Something else here lt  a gt  lt  li gt                   lt li class  divider  gt  lt  li gt                   lt li gt  lt a href     gt Separated link lt  a gt  lt  li gt                   lt li class  divider  gt  lt  li gt                   lt li gt  lt a href     gt One more separated link lt  a gt  lt  li gt                 lt  ul gt               lt  li gt             lt  ul gt              lt ul class  nav navbar-nav navbar-right  gt               lt li gt  lt a href     gt Link lt  a gt  lt  li gt               lt li class  dropdown  gt                 lt a href     class  dropdown-toggle  data-toggle  dropdown  gt Dropdown  lt b class  caret  gt  lt  b gt  lt  a gt                 lt ul class  dropdown-menu  gt                   lt li gt  lt a href     gt Action lt  a gt  lt  li gt                   lt li gt  lt a href     gt Another action lt  a gt  lt  li gt                   lt li gt  lt a href     gt Something else here lt  a gt  lt  li gt                   lt li class  divider  gt  lt  li gt                   lt li gt  lt a href     gt Separated link lt  a gt  lt  li gt                 lt  ul gt               lt  li gt             lt  ul gt           lt  div gt           lt  --   navbar-collapse -- gt         lt  div gt         lt  --   container-fluid -- gt       lt  nav gt     lt  div gt   lt  div gt    CSS     Bootstrap dropdown hover menu     body     font-family   PT Sans   sans-serif    font-size  13px    font-weight  400    color   4f5d6e    position  relative    background  rgb 26  49  95     background  -webkit-gradient linear  left top  left bottom  color-stop 0   rgba 26  49  95  1    color-stop 10   rgba 26  49  95  1    color-stop 24   rgba 29  108  141  1    color-stop 37   rgba 41  136  151  1    color-stop 77   rgba 39  45  100  1    color-stop 90   rgba 26  49  95  1    color-stop 100   rgba 26  49  95  1       filter  progid  DXImageTransform Microsoft gradient startColorstr   1a315f   endColorstr   1a315f   GradientType 0       body-wrap     min-height  700px      body-wrap     position  relative    z-index  0      body-wrap  before   body-wrap  after     content        position  absolute    top  0    left  0    right  0    z-index  -1    height  260px    background  -webkit-gradient linear  left top  left bottom  color-stop 0   rgba 26  49  95  1    color-stop 100   rgba 26  49  95  0       background  linear-gradient to bottom  rgba 26  49  95  1  0   rgba 26  49  95  0  100      filter  progid  DXImageTransform Microsoft gradient startColorstr   1a315f   endColorstr   001a315f   GradientType 0       body-wrap after     top  auto    bottom  0    background  linear-gradient to bottom  rgba 26  49  95  0  0   rgba 26  49  95  1  100      filter  progid  DXImageTransform Microsoft gradient startColorstr   001a315f   endColorstr   1a315f   GradientType 0      nav     margin-top  60px    box-shadow  5px 4px 5px  000      Then the important bit of JavaScript code      ul nav li dropdown   hover function         this  find   dropdown-menu   stop true  true  delay 200  fadeIn 500      function         this  find   dropdown-menu   stop true  true  delay 200  fadeOut 500

User · Answer

So you have this code    lt a class  dropdown-toggle  data-toggle  dropdown  gt Show menu lt  a gt    lt ul class  dropdown-menu  role  menu  gt       lt li gt Link 1 lt  li gt       lt li gt Link 2 lt  li gt        lt li gt Link 3 lt  li gt                                                lt  ul gt    Normally it works on a click event  and you want it work on a hover event  This is very simple  just use this JavaScript jQuery code     document  ready function              dropdown-toggle   mouseover function                 dropdown-menu   show                    dropdown-toggle   mouseout function             t   setTimeout function                     dropdown-menu   hide               100                dropdown-menu   on  mouseenter   function                     dropdown-menu   show                clearTimeout t              on  mouseleave   function                     dropdown-menu   hide                           This works very well and here is the explanation  we have a button  and a menu  When we hover the button we display the menu  and when we mouseout of the button we hide the menu after 100 nbsp ms  If you wonder why I use that  is because you need time to drag the cursor from the button over the menu  When you are on the menu  the time is reset and you can stay there as many time as you want  When you exit the menu  we will hide the menu instantly without any timeout   I ve used this code in many projects  if you encounter any problem using it  feel free to ask me questions

User · Answer

The best way of doing it is to just trigger Bootstrap s click event with a hover  This way  it should still remain touch device friendly       dropdown   hover function           dropdown-toggle   this  trigger  click

User · Answer

This worked for me    dropdown hover  dropdown-menu       display  block

User · Answer

To enhance Sudharshan s answer  I wrap this in a media query to prevent the hover when on XS display widths      media  min-width 768px        ul nav li dropdown hover  gt  ul dropdown-menu           display  block                  nav  dropdown-menu           margin-top  0            Also the caret in the markup is not required  just the dropdown class for the li

User · Answer

Bootstrap 4  2019  I read a lot of these answers but I ended up doing it myself because it was just not what i needed   I have Bootstrap 4  and want to keep the click   the hover functionality  Besides I want to enable it only on dropdowns that have an extra class   open-on-hover     I also want to keep the Bootstrap s Jquery that positions the dropdown when it is next to the edge of the page  So we don t just want to do  display  block   We want the full Bootstrap s way of working  So I just trigger click   The logic is  If it is a mouseenter then open it  if it is a mouseleave then hide it if it is open          Open Bootstrap 4 dropdown on hover       document  on  mouseenter mouseleave     dropdown open-on-hover   function e         let toggler     this  find   data-toggle  dropdown     first         if e type      mouseenter               toggler  trigger  click    open          else if    this  children   dropdown-menu show   length              toggler  trigger  click    close                The html   lt div class  dropdown open-on-hover  gt       lt div class  btn  data-toggle  dropdown  gt          Hover or click me      lt  div gt       lt div class  dropdown-menu  gt           lt a class  dropdown-item  gt              Item 1          lt  a gt           lt a class  dropdown-item  gt              Item 2          lt  a gt       lt  div gt   lt  div gt

User · Answer

I ve managed it as follows       ul nav li dropdown   hover function             this  children  ul dropdown-menu   slideDown            function             this  children  ul dropdown-menu   slideUp           I hope this helps someone

User · Answer

This is built into Bootstrap 3  Just add this to your CSS    dropdown hover  dropdown-menu       display  block

User · Answer

I have published a proper plugin for the Bootstrap 3 dropdown hover functionality  in which you can even define what happens when clicking on the dropdown-toggle element  the click can be disabled    https   github com istvan-ujjmeszaros bootstrap-dropdown-hover    Why I made it when there are many solutions already   I had issues with all the previously existing solutions  The simple CSS ones are not using the  open class on the  dropdown  so there will be no feedback on the drop-down toggle element when the drop-down is visible   The js ones are interfering with clicking on  dropdown-toggle  so the dropdown shows up on hover  then hides it when clicking on an opened drop-down  and moving out the mouse will trigger the drop-down to show up again  Some of the js solutions are breaking iOS compatibility  some plugins are not working on modern desktop browsers which are supporting the touch events   That s why I made the Bootstrap Dropdown Hover plugin which prevents all these issues by using only the standard Bootstrap javascript API  without any hack  Even the Aria attributes are working fine with this plugin

User · Answer

This is probably a stupid idea  but to just remove the arrow pointing down  you can delete the   lt b class  caret  gt  lt  b gt    This does nothing for the up pointing one  though

User · Answer

There are a lot of really good solutions here  But I thought that I would go ahead and put mine in here as another alternative  It s just a simple jQuery snippet that does it the way bootstrap would if it supported hover for dropdowns instead of just click  I ve only tested this with version 3 so I don t know if it would work with version 2  Save it as a snippet in your editor and have it at the stroke of a key    lt script gt        function                 dropdown   hover              function      this  addClass  open                  function      this  removeClass  open                         lt  script gt    Basically  It s just saying when you hover on the dropdown class  it will add the open class to it  Then it just works  When you stop hovering on either the parent li with the dropdown class or the child ul li s  it removes the open class  Obviously  this is only one of many solutions  and you can add to it to make it work on only specific instances of  dropdown  Or add a transition to either parent or child

User · Answer

This also can do that       dropdown   on  mouseover  function          this  find   dropdown-menu   show            dropdown   on  mouseleave  function          this  find   dropdown-menu   hide          If the dropdown has a gap between the hovered element the drop down will immediately close as seen in this GIF  To prevent this behaviour you can add a timeout to the events of 100 ms let dropdownTimer      dropdown   on  mouseover        gt        clearTimeout dropdownTimer        this  find   dropdown-menu   show            dropdown   on  mouseleave        gt       dropdownTimer   setTimeout      gt              this  find   dropdown-menu   hide           100

User · Answer

If you have an element with a dropdown class like this  for example     lt ul class  list-unstyled list-inline  gt       lt li class  dropdown  gt           lt a data-toggle  dropdown  href     gt  lt i class  fa fa-bars  gt  lt  i gt  Dropdown 1 lt  a gt           lt ul class  dropdown-menu  gt               lt li gt  lt a href    gt Item 1 lt  a gt  lt  li gt               lt li gt  lt a href    gt Item 2 lt  a gt  lt  li gt               lt li gt  lt a href    gt Item 3 lt  a gt  lt  li gt               lt li gt  lt a href    gt Item 4 lt  a gt  lt  li gt               lt li gt  lt a href    gt Item 5 lt  a gt  lt  li gt           lt  ul gt       lt  li gt       lt li class  dropdown  gt           lt a data-toggle  dropdown  href     gt  lt i class  fa fa-user  gt  lt  i gt  Dropdown 2 lt  a gt           lt ul class  dropdown-menu  gt               lt li gt  lt a href    gt Item A lt  a gt  lt  li gt               lt li gt  lt a href    gt Item B lt  a gt  lt  li gt               lt li gt  lt a href    gt Item C lt  a gt  lt  li gt               lt li gt  lt a href    gt Item D lt  a gt  lt  li gt               lt li gt  lt a href    gt Item E lt  a gt  lt  li gt           lt  ul gt       lt  li gt   lt  ul gt    Then you can have the dropdown menu to be automatically drop down on hover over  rather than having to click its title  by using this snippet of jQuery code    lt script gt          dropdown   hover          function                   this  find   dropdown-menu   stop true  true  delay 200  fadeIn                       function                   this  find   dropdown-menu   stop true  true  delay 200  fadeOut                              dropdown-menu   hover          function                   this  stop true  true                      function                   this  stop true  true  delay 200  fadeOut                      lt  script gt    Here is a demo  This answer relied on  Michael answer  I have made some changes and added some additions to get the dropdown menu work properly

User · Answer

This will hide the up ones   navbar  dropdown-menu before      display none     navbar  dropdown-menu after      display none

User · Answer

In addition to the answer from  My Head Hurts   which was great    ul nav li dropdown hover ul dropdown-menu      display  block          There are 2 lingering issues    Clicking on the dropdown link will open the dropdown-menu  And it will stay open unless the user clicks somewhere else  or hovers back over it  creating an awkward UI  There is a 1px margin between the dropdown link  and dropdown-menu  This causes the dropdown-menu to become hidden if you move slowly between the dropdown and dropdown-menu    The solution to  1  is removing the  class  and  data-toggle  elements from the nav link   lt a href     gt       Dropdown       lt b class  caret  gt  lt  b gt   lt  a gt    This also gives you the ability to create a link to your parent page - which wasn t possible with the default implementation  You can just replace the     with whatever page you want to send the user   The solution to  2  is removing the margin-top on the  dropdown-menu selector   navbar  dropdown-menu       margin-top  0px

User · Answer

Simply customize your CSS style in three lines of code   dropdown hover  dropdown-menu      display  block

User · Answer

This works for Bootstrap V4  JS    lt script gt            function                     dropdown-hover   hover                  function       this  addClass  show      this  find   data-toggle  dropdown     attr  aria-expanded   true     this  find   dropdown-menu   addClass  show                       function       this  removeClass  show      this  find   data-toggle  dropdown     attr  aria-expanded  false     this  find   dropdown-menu   removeClass  show                                      lt  script gt    Vanilla Bootstrap 4 Dropdown HTML except for the addition of the dropdown-hover class    lt div class  dropdown dropdown-hover  gt   lt button class  btn btn-text dropdown-toggle  type  button  id  dropdownMenuButton  data-toggle  dropdown  aria-haspopup  true  aria-expanded  false  gt      ABOUT  lt  button gt   lt div class  dropdown-menu  aria-labelledby  dropdownMenuButton  gt       lt a class  dropdown-item  href     gt Action lt  a gt       lt a class  dropdown-item  href     gt Another action lt  a gt       lt a class  dropdown-item  href     gt Something else here lt  a gt   lt  div gt      If you don t want to selectively enable the hover feature by using the  dropdown-hover class then simply change the jquery selector from  dropdown-hover to  dropdown

User · Answer

Even better with jQuery   jQuery  ul nav li dropdown   hover function       jQuery this  find   dropdown-menu   stop true  true  show      jQuery this  addClass  open       function       jQuery this  find   dropdown-menu   stop true  true  hide      jQuery this  removeClass  open

User · Answer

Also added margin-top 0 to reset the bootstrap css margin for  dropdown-menu so the menu list dosen t dissapear when the user hovers slowly from drop down menu to the menu list   ul nav li dropdown hover  gt  ul dropdown-menu       display  block          nav  dropdown-menu       margin-top  0

User · Answer

The jQuery solution is good  but it will need to either deal with on click events  for mobile or tablet  as hover won t work properly    Could maybe do some window re-size detection   Andres Ilich s answer seems to work well  but it should be wrapped in a media query    media  min-width  980px          dropdown-menu  sub-menu           left  100           position  absolute          top  0          visibility  hidden          margin-top  -1px              dropdown-menu li hover  sub-menu           visibility  visible              dropdown hover  dropdown-menu           display  block              nav-tabs  dropdown-menu   nav-pills  dropdown-menu   navbar  dropdown-menu           margin-top  0              navbar  sub-menu before           border-bottom  7px solid transparent          border-left  none          border-right  7px solid rgba 0  0  0  0 2           border-top  7px solid transparent          left  -7px          top  10px             navbar  sub-menu after           border-top  6px solid transparent          border-left  none          border-right  6px solid  fff          border-bottom  6px solid transparent          left  10px          top  11px          left  -6px

User · Answer

Just want to add  that if you have multiple dropdowns  as I do  you should write   ul nav li dropdown hover  gt  ul dropdown-menu       display  block          And it ll work properly

User · Answer

I created a pure on hover dropdown menu based on the latest  v2 0 2  Bootstrap framework that has support for multiple submenus and thought I d post it for future users    x000D   x000D  body   x000D    padding-top  60px  x000D    padding-bottom  40px  x000D    x000D   x000D   sidebar-nav   x000D    padding  9px 0  x000D    x000D   x000D   dropdown-menu  sub-menu   x000D    left  100   x000D    position  absolute  x000D    top  0  x000D    visibility  hidden  x000D    margin-top  -1px  x000D    x000D   x000D   dropdown-menu li hover  sub-menu   x000D    visibility  visible  x000D    x000D   x000D   dropdown hover  dropdown-menu   x000D    display  block  x000D    x000D   x000D   nav-tabs  dropdown-menu  x000D   nav-pills  dropdown-menu  x000D   navbar  dropdown-menu   x000D    margin-top  0  x000D    x000D   x000D   navbar  sub-menu before   x000D    border-bottom  7px solid transparent  x000D    border-left  none  x000D    border-right  7px solid rgba 0  0  0  0 2   x000D    border-top  7px solid transparent  x000D    left  -7px  x000D    top  10px  x000D    x000D   x000D   navbar  sub-menu after   x000D    border-top  6px solid transparent  x000D    border-left  none  x000D    border-right  6px solid  fff  x000D    border-bottom  6px solid transparent  x000D    left  10px  x000D    top  11px  x000D    left  -6px  x000D    x000D   lt link href  https   cdnjs cloudflare com ajax libs twitter-bootstrap 2 3 2 css bootstrap min css  rel  stylesheet    gt  x000D   x000D   lt div class  navbar navbar-fixed-top  gt  x000D     lt div class  navbar-inner  gt  x000D       lt div class  container-fluid  gt  x000D         lt a data-target   nav-collapse  data-toggle  collapse  class  btn btn-navbar  gt  x000D           lt span class  icon-bar  gt  lt  span gt  x000D           lt span class  icon-bar  gt  lt  span gt  x000D           lt span class  icon-bar  gt  lt  span gt  x000D         lt  a gt  x000D         lt a href     class  brand  gt Project name lt  a gt  x000D         lt div class  nav-collapse  gt  x000D           lt ul class  nav  gt  x000D             lt li class  active  gt  lt a href     gt Home lt  a gt  lt  li gt  x000D             lt li gt  lt a href     gt Link lt  a gt  lt  li gt  x000D             lt li gt  lt a href     gt Link lt  a gt  lt  li gt  x000D             lt li gt  lt a href     gt Link lt  a gt  lt  li gt  x000D             lt li class  dropdown  gt  x000D               lt a data-toggle  dropdown  class  dropdown-toggle  href     gt Dropdown  lt b class  caret  gt  lt  b gt  lt  a gt  x000D               lt ul class  dropdown-menu  gt  x000D                 lt li gt  x000D                   lt a href     gt 2-level Dropdown  lt i class  icon-arrow-right  gt  lt  i gt  lt  a gt  x000D                   lt ul class  dropdown-menu sub-menu  gt  x000D                     lt li gt  lt a href     gt Action lt  a gt  lt  li gt  x000D                     lt li gt  lt a href     gt Another action lt  a gt  lt  li gt  x000D                     lt li gt  lt a href     gt Something else here lt  a gt  lt  li gt  x000D                     lt li class  divider  gt  lt  li gt  x000D                     lt li class  nav-header  gt Nav header lt  li gt  x000D                     lt li gt  lt a href     gt Separated link lt  a gt  lt  li gt  x000D                     lt li gt  lt a href     gt One more separated link lt  a gt  lt  li gt  x000D                   lt  ul gt  x000D                 lt  li gt  x000D                 lt li gt  lt a href     gt Another action lt  a gt  lt  li gt  x000D                 lt li gt  lt a href     gt Something else here lt  a gt  lt  li gt  x000D                 lt li class  divider  gt  lt  li gt  x000D                 lt li class  nav-header  gt Nav header lt  li gt  x000D                 lt li gt  lt a href     gt Separated link lt  a gt  lt  li gt  x000D                 lt li gt  lt a href     gt One more separated link lt  a gt  lt  li gt  x000D               lt  ul gt  x000D             lt  li gt  x000D           lt  ul gt  x000D           lt form action    class  navbar-search pull-left  gt  x000D             lt input type  text  placeholder  Search  class  search-query span2  gt  x000D           lt  form gt  x000D           lt ul class  nav pull-right  gt  x000D             lt li gt  lt a href     gt Link lt  a gt  lt  li gt  x000D             lt li class  divider-vertical  gt  lt  li gt  x000D             lt li class  dropdown  gt  x000D               lt a class     href     gt Menu lt  a gt  x000D             lt  li gt  x000D           lt  ul gt  x000D         lt  div gt  x000D         lt  --   nav-collapse -- gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   lt hr gt  x000D   x000D   lt ul class  nav nav-pills  gt  x000D     lt li class  active  gt  lt a href     gt Regular link lt  a gt  lt  li gt  x000D     lt li class  dropdown  gt  x000D       lt a href     data-toggle  dropdown  class  dropdown-toggle  gt Dropdown  lt b class  caret  gt  lt  b gt  lt  a gt  x000D       lt ul class  dropdown-menu  id  menu1  gt  x000D         lt li gt  x000D           lt a href     gt 2-level Menu  lt i class  icon-arrow-right  gt  lt  i gt  lt  a gt  x000D           lt ul class  dropdown-menu sub-menu  gt  x000D             lt li gt  lt a href     gt Action lt  a gt  lt  li gt  x000D             lt li gt  lt a href     gt Another action lt  a gt  lt  li gt  x000D             lt li gt  lt a href     gt Something else here lt  a gt  lt  li gt  x000D             lt li class  divider  gt  lt  li gt  x000D             lt li class  nav-header  gt Nav header lt  li gt  x000D             lt li gt  lt a href     gt Separated link lt  a gt  lt  li gt  x000D             lt li gt  lt a href     gt One more separated link lt  a gt  lt  li gt  x000D           lt  ul gt  x000D         lt  li gt  x000D         lt li gt  lt a href     gt Another action lt  a gt  lt  li gt  x000D         lt li gt  lt a href     gt Something else here lt  a gt  lt  li gt  x000D         lt li class  divider  gt  lt  li gt  x000D         lt li gt  lt a href     gt Separated link lt  a gt  lt  li gt  x000D       lt  ul gt  x000D     lt  li gt  x000D     lt li class  dropdown  gt  x000D       lt a href     gt Menu lt  a gt  x000D     lt  li gt  x000D     lt li class  dropdown  gt  x000D       lt a href     gt Menu lt  a gt  x000D     lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    Demo

User · Answer

lt ul class  nav navbar-nav  gt           lt li class  active  gt  lt a href     gt Link lt  a gt  lt  li gt           lt li gt  lt a href     gt Link lt  a gt  lt  li gt           lt li class  dropdown  gt             lt a href     class  dropdown-toggle  data-toggle  dropdown  gt Dropdown  lt b class  caret  gt  lt  b gt  lt  a gt             lt ul class  dropdown-menu  gt               lt li gt  lt a href     gt Action lt  a gt  lt  li gt               lt li gt  lt a href     gt Another action lt  a gt  lt  li gt               lt li gt  lt a href     gt Something else here lt  a gt  lt  li gt               lt li class  divider  gt  lt  li gt               lt li gt  lt a href     gt Separated link lt  a gt  lt  li gt               lt li class  divider  gt  lt  li gt               lt li gt  lt a href     gt One more separated link lt  a gt  lt  li gt             lt  ul gt           lt  li gt         lt  ul gt         lt script gt             ul nav li dropdown   hover function               this  find   dropdown-menu   stop true           true  delay 200  fadeIn 500              function               this  find   dropdown-menu   stop true           true  delay 200  fadeOut 500                      lt  script gt

User · Answer

The very simple solution for version 2  only CSS  Keeps the same friendly functionality for mobile and tablet    media  min-width  980px         dropdown hover  dropdown-menu          display  block

User · Answer

This works for WordPress Bootstrap    navbar  nav  gt  li  gt   dropdown-menu after   navbar  nav  gt  li  gt   dropdown-menu before       content  none

User · Answer

x000D   x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D   lt style gt  x000D   dropbtn   x000D      background-color   4CAF50  x000D      color  white  x000D      padding  16px  x000D      font-size  16px  x000D      border  none  x000D      cursor  pointer  x000D    x000D   x000D   dropdown   x000D      position  relative  x000D      display  inline-block  x000D    x000D   x000D   dropdown-content   x000D      display  none  x000D      position  absolute  x000D      background-color   f9f9f9  x000D      min-width  160px  x000D      box-shadow  0px 8px 16px 0px rgba 0 0 0 0 2   x000D      z-index  1  x000D    x000D   x000D   dropdown-content a   x000D      color  black  x000D      padding  12px 16px  x000D      text-decoration  none  x000D      display  block  x000D    x000D   x000D   dropdown-content a hover  background-color   f1f1f1  x000D   x000D   dropdown hover  dropdown-content   x000D      display  block  x000D    x000D   x000D   dropdown hover  dropbtn   x000D      background-color   3e8e41  x000D    x000D   lt  style gt  x000D   lt  head gt  x000D   lt body gt  x000D   x000D   lt h2 gt Hoverable Dropdown lt  h2 gt  x000D   lt p gt Move the mouse over the button to open the dropdown menu  lt  p gt  x000D   x000D   lt div class  dropdown  gt  x000D     lt button class  dropbtn  gt Dropdown lt  button gt  x000D     lt div class  dropdown-content  gt  x000D       lt a href     gt Link 1 lt  a gt  x000D       lt a href     gt Link 2 lt  a gt  x000D       lt a href     gt Link 3 lt  a gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

Update  The plugin is on GitHub and I am working on some improvements  like use only with data-attributes  no JS necessary   I ve leaving the code in below  but it s not the same as what s on GitHub   I liked the purely CSS version  but it s nice to have a delay before it closes  as it s usually a better user experience  i e  not punished for a mouse slip that goes 1 px outside the dropdown  etc   and as mentioned in the comments  there s that 1px of margin you have to deal with or sometimes the nav closes unexpectedly when you re moving to the dropdown from the original button  etc   I created a quick little plugin that I ve used on a couple sites and it s worked nicely  Each nav item is independently handled  so they have their own delay timers  etc   JS     outside the scope of the jQuery plugin to    keep track of all dropdowns var  allDropdowns            if instantlyCloseOthers is true  then it will instantly    shut other nav items when a new one is hovered over   fn dropdownHover   function options            the element we really care about        is the dropdown-toggle s parent      allDropdowns    allDropdowns add this parent          return this each function             var  this     this  parent                defaults                     delay  500                  instantlyCloseOthers  true                            data                     delay    this  data  delay                    instantlyCloseOthers    this  data  close-others                              options     extend true      defaults  options  data               timeout            this hover function                 if options instantlyCloseOthers     true                   allDropdowns removeClass  open                 window clearTimeout timeout                 this  addClass  open               function                 timeout   window setTimeout function                      this removeClass  open                   options delay                              The delay parameter is pretty self explanatory  and the instantlyCloseOthers will instantly close all other dropdowns that are open when you hover over a new one   Not pure CSS  but hopefully will help someone else at this late hour  i e  this is an old thread    If you want  you can see the different processes I went through  in a discussion on the  concrete5 IRC  to get it to work via the different steps in this gist  https   gist github com 3876924  The plugin pattern approach is much cleaner to support individual timers  etc   See the blog post for more

User · Answer

I hope this helps  Check the link https   jsfiddle net awb7gfb1    lt nav gt       lt div id  menubar  class   collapse navbar-collapse row  gt           lt ul id  dropdownNavbar  class  nav navbar-nav  gt               lt li class  dropdown  gt                   lt button type  button  class  btn btn-primary dropbtn  gt  lt span class  glyphicon glyphicon-time  gt  lt  span gt                  Time Card                  lt span class  caret  gt  lt  span gt  lt  button gt                   lt div class  dropdown-content  gt                       lt a id  showTimeCard  href     gt My Time Card lt  a gt                       lt a href     gt Sub Menu 2 lt  a gt                       lt a href     gt Sub Menu 3 lt  a gt                       lt a href     gt Sub Menu 4 lt  a gt                       lt a href     gt Sub Menu 5 lt  a gt                   lt  div gt               lt  li gt               lt li class  dropdown  gt                   lt button type  button  class  btn btn-primary dropbtn  gt  lt span class  glyphicon glyphicon-stats  gt  lt  span gt                  Project                  lt span class  caret  gt  lt  span gt  lt  button gt                   lt div class  dropdown-content  gt                       lt a href     gt Sub Menu 1 lt  a gt                       lt a href     gt Sub Menu 2 lt  a gt                       lt a href     gt Sub Menu 3 lt  a gt                   lt  div gt               lt  li gt               lt li class  dropdown  gt                   lt button type  button  class  btn btn-primary dropbtn  gt  lt span class  glyphicon glyphicon-user  gt  lt  span gt                  HR Links                  lt span class  caret  gt  lt  span gt  lt  button gt                   lt div class  dropdown-content  gt                       lt a href     gt Sub Menu 1 lt  a gt                       lt a href     gt Sub Menu 2 lt  a gt                   lt  div gt               lt  li gt               lt li class  dropdown  gt                   lt button type  button  class  btn btn-primary dropbtn  gt                   lt span class  glyphicon glyphicon-screenshot  gt  lt  span gt                  Leave Tracker                  lt span class  caret  gt  lt  span gt  lt  button gt                   lt div class  dropdown-content  gt                       lt a href     gt Sub Menu 1 lt  a gt                       lt a href     gt Sub Menu 2 lt  a gt                       lt a href     gt Sub Menu 3 lt  a gt                       lt a href     gt Sub Menu 4 lt  a gt                   lt  div gt               lt  li gt               lt li class  dropdown  gt                   lt button type  button  class  btn btn-primary dropbtn  gt                   lt span class  glyphicon glyphicon-briefcase  gt  lt  span gt                  Accounts                  lt span class  caret  gt  lt  span gt  lt  button gt                   lt div class  dropdown-content  gt                       lt a href     gt Sub Menu 1 lt  a gt                       lt a href     gt Sub Menu 2 lt  a gt                       lt a href     gt Sub Menu 3 lt  a gt                       lt a href     gt Sub Menu 4 lt  a gt                       lt a href     gt Sub Menu 5 lt  a gt                   lt  div gt               lt  li gt               lt li class  dropdown  gt                   lt button type  button  class  btn btn-primary dropbtn  gt                   lt span class  glyphicon glyphicon-headphones  gt  lt  span gt                  Service Desk                  lt span class  caret  gt  lt  span gt  lt  button gt                   lt div class  dropdown-content  gt                       lt a href     gt Sub Menu 1 lt  a gt                       lt a href     gt Sub Menu 2 lt  a gt                       lt a href     gt Sub Menu 3 lt  a gt                       lt a href     gt Sub Menu 4 lt  a gt                   lt  div gt               lt  li gt               lt li class  dropdown  gt                   lt button type  button  class  btn btn-primary dropbtn  gt                   lt span class  glyphicon glyphicon-file  gt  lt  span gt                  Reports                  lt span class  caret  gt  lt  span gt  lt  button gt                   lt div class  dropdown-content  gt                       lt a href     gt Sub Menu 1 lt  a gt                       lt a href     gt Sub Menu 2 lt  a gt                       lt a href     gt Sub Menu 3 lt  a gt                       lt a href     gt Sub Menu 4 lt  a gt                       lt a href     gt Sub Menu 5 lt  a gt                   lt  div gt               lt  li gt               lt li class  dropdown  gt                   lt button type  button  class  btn btn-primary dropbtn  gt                   lt span class  glyphicon glyphicon-cog  gt  lt  span gt                  Settings                  lt span class  caret  gt  lt  span gt  lt  button gt                   lt div class  dropdown-content  gt                       lt a href     gt Sub Menu 1 lt  a gt                       lt a href     gt Sub Menu 2 lt  a gt                       lt a href     gt Sub Menu 3 lt  a gt                   lt  div gt               lt  li gt           lt  ul gt       lt  div gt   lt  nav gt    And the CSS   dropdown       float  left      padding-right  1px      dropbtn      border  0px      height  30px      border-radius  0px 10px    li button   dropbtn       display  inline-block      color  white      text-align  center     li button hover   dropdown hover  dropbtn       background-color   12A5F4      dropbtn active       background   12A5F4      dropdown-content       display  none      position  absolute      background-color   e8f3f4      min-width  100       box-shadow  0px 8px 16px 0px rgba 0  0  0  0 1       z-index  10      navbar-header      overflow  visible      z-index  1      dropdown-content a       color  black      padding  5px 10px      display  block      text-align  left      dropdown-content a hover       background-color   d8dee2     dropdown hover  dropdown-content       display  block      menubar      padding-top  5px      overflow  visible      z-index  10      padding-left  0px      padding-right  0px      margin  0px      dropdownNavbar      margin  0px      navbar-toggle      background-color   3382d5     navbar-toggle span      background-color  white

User · Answer

Here s my technique that adds a slight delay before the menu is closed after you stop hovering on the menu or the toggle button  The  lt button gt  that you would normally click to display the nav menu is  nav dropdown     function       var delay close it  nav menu timeout  open it    nav menu timeout   void 0    open it   function         if  nav menu timeout          clearTimeout nav menu timeout         nav menu timeout   null            return     navbar  dropdown   addClass  open           delay close it   function         var close it      close it   function           return     navbar  dropdown   removeClass  open               return nav menu timeout   setTimeout close it  500             body   on  mouseover     nav dropdown   nav dropdown     open it  on  mouseout     nav dropdown   delay close it     return    body   on  mouseover     navbar  dropdown  dropdown-menu   open it  on  mouseout     navbar  dropdown  dropdown-menu   delay close it

User · Answer

Adding this for those who want default functionality on mobile devices  Can set min-width      as required   media only screen and  min-width  1195px      ul nav li dropdown hover  gt  ul dropdown-menu       display  block        ul nav li dropdown gt  ul dropdown-menu       display  none          setting display  none so that dropdown-toggle won t create an issue  If you leave it as is  there might be two dropdowns open at the same time

User · Answer

Bootstrap v4 Solution - Works in IE This will allow you to follow top level navigation links   This is a complete solution that uses the mouseover and mouseleave events and some screen width checking   This was built with desktop and mobile in mind  Fell free to change the BREAK POINT variable to suit your needs  D  jQuery var WINDOW WIDTH  var BREAK POINT   991    function                Set window width onload        WINDOW WIDTH     window  width       Returns width of browser viewport         Set window width if the browser is resized          window  resize function              WINDOW WIDTH     window  width       Returns width of browser viewport                  Dropdown menu on mouseenter           quot  nav-item dropdown quot   on  mouseenter   function              console log  quot mouseenter quot            if  WINDOW WIDTH  gt   BREAK POINT                   Open up the dropdown               this  addClass  show       add the class show to the li parent               this  children   nav-link   removeAttr  data-toggle       remove the data-toggle attribute so we can click and follow link               this  children   dropdown-menu   addClass  show       add the class show to the dropdown div sibling                           Dropdown menu on mouseleave           quot  nav-item dropdown quot   on  mouseleave   function              console log  quot mouseleave quot            if  WINDOW WIDTH  gt   BREAK POINT                   Open up the dropdown               this  removeClass  show       add the class show to the li parent               this  children   nav-link   attr  data-toggle    dropdown       remove the data-toggle attribute so we can click and follow link               this  children   dropdown-menu   removeClass  show       add the class show to the dropdown div sibling                        CSS  media min-width   768px       dropdown-menu       margin-top  0     fixes closing on slow mouse transition

User · Answer

You can use the default     dropdown  toggle   method to toggle the dropdown menu on hover       nav  dropdown   hover function         this  find   dropdown-toggle   dropdown  toggle

User · Answer

To get the menu to automatically drop on hover then this can achieved using basic CSS  You need to work out the selector to the hidden menu option and then set it to display as block when the appropriate li tag is hovered over  Taking the example from the twitter bootstrap page  the selector would be as follows   ul nav li dropdown hover  gt  ul dropdown-menu       display  block          However  if you are using Bootstrap s responsive features  you will not want this functionality on a collapsed navbar  on smaller screens   To avoid this  wrap the code above in a media query    media  min-width  979px      ul nav li dropdown hover  gt  ul dropdown-menu       display  block            To hide the arrow  caret  this is done in different ways depending on whether you are using Twitter Bootstrap version 2 and lower or version 3   Bootstrap 3  To remove the caret in version 3 you just need to remove the HTML  lt b class  caret  gt  lt  b gt  from the  dropdown-toggle anchor element    lt a class  dropdown-toggle  data-toggle  dropdown  href     gt      Dropdown      lt b class  caret  gt  lt  b gt      lt -- remove this line  lt  a gt    Bootstrap 2  amp  lower  To remove the caret in version 2 you need a little more insight into CSS and I suggest looking at how the  after pseudo element works in more detail  To get you started on your way to understanding  to target and remove the arrows in the twitter bootstrap example  you would use the following CSS selector and code   a menu after   dropdown-toggle after       content  none      It will work in your favour if you look further into how these work and not just use the answers that I have given you   Thanks to  CocaAkat for pointing out that we were missing the     child combinator to prevent sub menus being shown on the parent hover

User · Answer

dropdown   hover function e    this  addClass  open

User · Answer

Use two links inline  Hide the link with the dropdown toggle and add the onmouseover event over the visible link to click the dropdown menu    lt a class  pretty-button     href     alt  Notifications     onmouseover      notifications-dropdown   click    gt   lt  a gt    lt a style  display none     id  notifications-dropdown     class  js-nav js-tooltip js-dynamic-tooltip     href        alt  Notifications     data-toggle  dropdown  gt      lt span class  fa fa-flag fa-2x  gt  lt  span gt   lt  a gt

User · Answer

We saw  In addition to the answer from  My Head Hurts    Cory Price  found out two problems      Problem 1  Clicking on the dropdown link will open the dropdown-menu  And it will stay open unless the user clicks somewhere   else  or hovers back over it  creating an awkward UI       Solution  Remove the  class  and  data-toggle  elements from the nav link   The solution was nearly perfect  but the problem here is  when it comes to mobile devices and tablets  it won t work   I m using a bit of jQuery code to fix this    if    window  width    gt  769            dropdown-toggle   removeAttr  data-toggle            dropdown-menu   removeAttr  style            dropdown   removeClass  open        window  resize function          if    window  width    gt  769                dropdown-toggle   removeAttr  data-toggle                dropdown-menu   removeAttr  style                dropdown   removeClass  open              else               dropdown-toggle   attr  data-toggle    dropdown                   Note  Here we assume that the collapse to mobile devices and tablets is from 768px

User · Answer

I ve used a bit of jQuery      Add hover effect to menus jQuery  ul nav li dropdown   hover function       jQuery this  find   dropdown-menu   stop true  true  delay 200  fadeIn       function       jQuery this  find   dropdown-menu   stop true  true  delay 200  fadeOut

User · Answer

Use this code to open the submenu on mousehover  desktop only       ul nav li dropdown   hover function          if    window  width    gt  767              this  find   dropdown-menu   show             function          if    window  width    gt  767              this  find   dropdown-menu   hide   css  display                   And if you want the first level menu to be clickable  even on mobile add this           dropdown-toggle   click function         if    this  next   dropdown-menu   is   visible              window location     this  attr  href                The submenu  dropdown-menu  will be opened with mousehover on desktop  and with click touch on mobile and tablet  Once the submenu was open  a second click will let you open the link  Thanks to the if    window  width    gt  767   the submenu will take the full screen width on mobile

User · Answer

Overwrite bootstrap js with this script   jQuery document  ready function           navbar  dropdown   hover function           this  addClass  extra-nav-class   find   dropdown-menu   first   stop true  true  delay 250  slideDown       function         var na     this      na find   dropdown-menu   first   stop true  true  delay 100  slideUp  fast   function    na removeClass  extra-nav-class               dropdown-submenu   hover function           this  addClass  extra-nav-class   find   dropdown-menu   first   stop true  true  delay 250  slideDown       function         var na     this      na find   dropdown-menu   first   stop true  true  delay 100  slideUp  fast   function    na removeClass  extra-nav-class

User · Answer

The most Standard Answer    Supports aria-expanded attribute Supports non touch devices Supports touch devices Supports all dropdowns   var isTouchDevice      ontouchstart  in window                                      navigator MaxTouchPoints  gt  0                                      navigator msMaxTouchPoints  gt  0    if  isTouchDevice          open dropdowns on hover on non mobile devices         dropdown   hover function e                dropdown-toggle   this  dropdown  toggle            e stopPropagation                   prevent blinkling         submenu-link   click function e            e stopPropagation                You can change     dropdown   to a specific area if you need         top-menu  dropdown

[css] How to make Twitter Bootstrap menu dropdown on hover rather than click

Examples related to css

Examples related to drop-down-menu

Examples related to twitter-bootstrap