Question

I want to generate the drop down menu, which the menu are generate from database.
This is the code jquery in my site.master :

<script language="javascript" type="text/javascript" src="/Scripts/jquery.min.js">
</script>
<script type='text/javascript'>
$(document).ready(function () {
    $('.links li code').hide();
    $('.links li p').click(function () {
    $(this).next().slideToggle('fast');
    });
});
</script>
<link rel="stylesheet" type="text/css" href="index.css" media="all"/>

And this is my coding in my views :

<ul id='navmenu-v'>
<%: Html.ActionLink(a.Name)%>
<ul>
    <li><a>aaa</a></li>
    <li><a>sss</a></li>
    <li><a>ddd</a></li>
</ul>
</ul>

The parents list are work and I want to hover it to show the second list. But it does nothing when I hover it. Otherwise, the child list are show, while I click the parent list.

Anyone know how to solve it?

Thanks.

Answer 1

You have to paste the full markup but a wild guess is:

 $(this).next().slideToggle('fast');

change to:

$(this).find('#navmenu-v').next().slideToggle('fast');

also having the same id selector many times in a page is invalid HTML, consider changing the

   <ul id='navmenu-v'> 

to

    <ul class='navmenu-v'>