jquery - How is this bootstrap menu showing the drop down on hover? -

i'm having bit of trouble difference between bootstrap theme wordpress , bootstrap theme plain old web pages.

the main menu (topmost menu) on wordpress showing perfectly, styled nice , drops down when mouse on it...but on main page it's nightmare , shows on click only.

i've compared css , js files both bootstraps , can't find reason why wp 1 showing on hover , allowing me click hover links , regular 1 not. differences between files colours. can please me figure out?

wordpress menu: http://www.nextlevelsmf.com/news/

regular menu (only page): http://www.nextlevelsmf.com/testing.html

the css styles have selector of class navbar-main not present in menu non wordpress pages. add css:

.navbar li.dropdown:hover > ul.dropdown-menu {  display: block;  -webkit-animation: fadeinup 300ms;    -moz-animation: fadeinup 300ms;    -ms-animation: fadeinup 300ms;    -o-animation: fadeinup 300ms;    animation: fadeinup 300ms; }  .navbar .dropdown-menu {   background-color: #2d2d2d;   box-shadow: none;   border: 0;   padding: 0;   margin-top: -3px; } .navbar .dropdown-menu > li > {   padding: 8px 15px;   color: #999; } .navbar .dropdown-menu > li:hover > a, .navbar .dropdown-menu > li:focus > a, .navbar .dropdown-menu > li.active > {   background-color: #2d2d2d; } .navbar .dropdown-menu > li:last-child > {   border-radius: 0 0 3px 3px; } .navbar .dropdown-menu > li.divider {   background-color: #2d2d2d; } .navbar li.dropdown:hover > ul.dropdown-menu {   display: block;   -webkit-animation: fadeinup 300ms;   -moz-animation: fadeinup 300ms;   -ms-animation: fadeinup 300ms;   -o-animation: fadeinup 300ms;   animation: fadeinup 300ms; } .navbar .sub-menu .dropdown-menu {   left: 100%;   top: 0;   margin-top: 0; } 

also media query based on navbar-right right aligning dropdowns. add fix:

@media (min-width: 768px) .navbar-right .dropdown-menu {   right:0;   left: 0; }