I'm just picking up javascript and Jquery. I'm trying to do a drop down menu.
I've downloaded several and tried to use their code but they all seem to have
issues with my menu. What is going on? My current problem is that when a person
rollsover just the li that it then opens all of the dropdowns causing the user
to have to enter and leave each of the parent <li>. But if I hide them all
before doing the slidedown then I get a realy bad flicker problem.
I have spent 2 solid days on this and it should be simple. What do I do?
Code:
// JavaScript Document $(document).ready(function () { $('.mainnav
li').mouseenter(Menu.show); $('.mainnav li ul').mouseleave(Menu.hide);
}); var Menu = { show: function(event) { var menuLi=
$(this).children(); $(menuLi).slideDown('slow'); }, hide: function(event)
{ $(this).hide(); } }
html:
<ul class="mainnav"> <li><a href="about_the_disease.php">About the
Disease</a> <ul class="dropdowns"> <li><a
href="prevent_the_preventable.php">Prevent the Preventable</a></li>
<li><a href="venous_thromoembolism.php">VTE and Pulmonary Embolism</a></li>
<li><a href="vena_cava_filters_help.php">When Vena Cava Filters can
help</a></li> </ul> </li> <li><a href="#">Procedure</a>
<ul class="dropdowns"> <li><a href="sizing_the_cava.php">Sizing the
Cava</a></li> <li><a href="choosing_a_filter.php">Choosing a
Filter</a></li> <li><a href="deployment.php">Deployment</a></li>
<li><a href="products.php">Product Suite</a></li> </ul> </li>
<li><a href="casestudies.php">Case Studies</a> <ul class="dropdowns">
<li><a href="casestudies.php#case1">Case 1</a></li> <li><a
href="casestudies.php#case2">Case 2</a></li> <li><a
href="casestudies.php#case3">Case 3</a></li> </ul> </li>
</ul>
