I have a menu, that has nested menu. so i wrote javascript to make it work but on every li, the submenu open. even if it is not a nested menu. my code is here. JSFiddle not working but my code is there
OK, so here’s your code as it stands:
<ul>
<li>Hello</li>
<li>World</li>
<li>Work</li>
<ul class="dropdown-menu">
<li>Photography</li>
<li>Websites</li>
</ul>
<li>Contact</li>
</ul>
$(document).ready(function(){
$(".dropdown-menu ul ").hide();
$(".dropdown-menu").hover(function(){
$(".dropdown-menu ul").toggle();
})
});
Your first problem is that the selector .dropdown-menu ul
isn’t matching anything, as it’s looking for a ul that is a descendent of an element with the .dropdown-menu class.
Additionally, the hover event won’t get fired on a hidden element, so your dropdown will never be shown.
To get it working, the first thing I would do is to nest the ul for the dropdown inside of li that should be the parent. Then move the dropdown-menu
class to the li. Your markup should now look like this:
<ul>
<li>Hello</li>
<li>World</li>
<li class="dropdown-menu">Work
<ul>
<li>Photography</li>
<li>Websites</li>
</ul>
</li>
<li>Contact</li>
</ul>
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.