I'm using the hoverIntent plugin to control a series of drop-down
menus. I have it set up and it works save for the fact that if I hover
over a li element it fires (displays) all the of drop-downs instead of
doing it individually.
I think I need to set up some sort of timer, or stop (?) This is my
first js experience so I'm not quite sure how. Any help would be
grealy apppreciated.
The code looks like this:
<html>
<head>
<script src="../../../../../_library/jquery_compressed.js"
type="text/javascript" charset="utf-8"></script>
<script src="../../../../../_library/jquery-pgin-hoverintent.js"
type="text/javascript" charset="utf-8"></script>
<script>
$(document).ready(function(){
$("#topmenu li ").hoverIntent({
sensitivity: 1,
interval: 1000,
over: makeTall,
timeout: 1000,
out: makeShort
});
}); // close document.ready
function makeTall(){ $("ul.tags").css({ display:"block" });}
function makeShort(){ $("ul.tags").css({ display:"none" });}
</script>
</head>
<body class="home">
<ul id="topmenu">
<li id="first"><a href="">this is the main link</a>
<ul>
<form>
<div>
<li><input type="checkbox">hello</li>
<li><input type="checkbox">hello</li>
<li><input type="checkbox">hello</li>
<li><input type="checkbox">hello</li>
<li><input type="checkbox">hello</li>
<li><input type="checkbox">hello</li>
</div>
<div>
<li><input type="checkbox">hello</li>
<li><input type="checkbox">hello</li>
<li><input type="checkbox">hello</li>
<li><input type="checkbox">hello</li>
<li><input type="checkbox">hello</li>
<li><input type="checkbox">hello</li>
</div>
<div>
<li><input type="checkbox">hello</li>
<li><input type="checkbox">hello</li>
<li><input type="checkbox">hello</li>
<li><input type="checkbox">hello</li>
<li><input type="checkbox">hello</li>
<li><input type="checkbox">hello</li>
</div>
</form>
</ul>
</li>
<li><a href="">this is the main link</a>
<ul class="tags">
<form>
<div>
<li><input type="checkbox">hello</li>
<li><input type="checkbox">hello</li>
<li><input type="checkbox">hello</li>
<li><input type="checkbox">hello</li>
<li><input type="checkbox">hello</li>
<li><input type="checkbox">hello</li>
</div>
<div>
<li><input type="checkbox">hello</li>
<li><input type="checkbox">hello</li>
<li><input type="checkbox">hello</li>
<li><input type="checkbox">hello</li>
<li><input type="checkbox">hello</li>
<li><input type="checkbox">hello</li>
</div>
<div>
<li><input type="checkbox">hello</li>
<li><input type="checkbox">hello</li>
<li><input type="checkbox">hello</li>
<li><input type="checkbox">hello</li>
<li><input type="checkbox">hello</li>
<li><input type="checkbox">hello</li>
</div>
</form>
</ul>
</li>
</ul>
</body>
</html>
Thanks.
