Abhijit Borkakoty Abhijit Borkakoty - 1 year ago 84
HTML Question

Hover dropdown menu not working using jquery

Here is a drop down menu that I made, but it's not working...the target element must be incorrect but I can't figure it out..please help

link http://paste.ofcode.org/gpH4jyqDcMENsthtmAzeQs

Answer Source

see here jsfiddle

you need to apply the changes on the dropdown ul ( second ul ) not on the li or the a that are in it.

instead of ul li li a use this CSS code :

 ul  ul{
        display: none;

and JQ :

jQuery(function($) {

    $('.myli').hover(function() {



ALSO you could use only CSS to do this. BUT if you want to replicate the slideToggle transition you should know that transition in css works only with 'calculable' values (0,1,100%) etc. so it doesn't work with display or visibility so in order to do this you need to know the fixed height of the dropdown and do it like so


ul  ul{
   max-height: 0;

 ul li.myli:hover > ul { 
   max-height: 300px;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download