I'm having trouble implementing a jQuery effect or CSS fade/slide on my sub menu. The ul sub nav is initially set to display none in my CSS. When you click on the 'a' tag with the class dropdown-toggle, it adds the class 'display-sub-menu' to its child ul (which then changes to display block according to my CSS). Here's my code:
HTML:
<ul class="nav-list">
<li><a href="index.html">Home</a></li>
<li>
<a class="dropdown-toggle" title="About Us">About Us</a>
<ul>
<li><a href="about-us.html">About Our Business</a></li>
<li><a href="meet-the-team.html">Meet The Team</a></li>
</ul>
</li>
</ul>
This is my current jQuery script:
$('a.dropdown-toggle').click(function(e) {
$(this).next().toggleClass('display-sub-menu', 250);
});
Currently, this only toggles between hiding and displaying the sub menu. I would like to add a slide effect using slideToggle but can't seem to get it to work.