Have a look at this JSfiddle.
The root menus expands on mouseover, as expected. But the child-items does not.
If you remove <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"/>
from the <head>
-section, it will indeed work.
What is causing this conflict, and how can it be resolved?
2
Answers
Here
overflow
style creates problem, bootstrap default behaviour is when you click or hover that applyoverflow: hidden
in element but you want to add child menu expand so, you need to add CSS!important
is needed because thatoverflow
condition is added viainline
UPDATED FIDDLE: http://jsfiddle.net/7f38r41z/
Replace your jQuery classes same as below: