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 t

Answer 1

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:

body {
  padding-top: 60px;
  padding-bottom: 40px;
}

.sidebar-nav {
  padding: 9px 0;
}

.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;
}

  

    

      
        
        
        
      
      Project name
      

        

          
Home
          
Link
          
Link
          
Link
          

            Dropdown 
            

              

                2-level Dropdown 
                

                  
Action
                  
Another action
                  
Something else here
                  

                  
Nav header
                  
Separated link
                  
One more separated link
                
              
              
Another action
              
Something else here
              

              
Nav header
              
Separated link
              
One more separated link
            
          
        
        

          
        
        

          
Link
          

          

            Menu
          
        
      
      
    
  





  
Regular link
  

    Dropdown 
    

      

        2-level Menu 
        

          
Action
          
Another action
          
Something else here
          

          
Nav header
          
Separated link
          
One more separated link
        
      
      
Another action
      
Something else here
      

      
Separated link
    
  
  

    Menu
  
  

    Menu
  

Demo