Check out the poly link:
When you hover the submenu drops down and the arrow next to Poly turns down, however, when you move your mouse to select a link from the submenu the arrow tuns back up because you are no longer hovering over the poly link?
Any ideas?
Add to a.poly:hover list another entry: a.poly.clicked. Then you in js where you are showing/hiding menu, toggle class “clicked” for that link.
So css changes from
#nav a.poly:hover, #nav a.poly:focus{background:url(site_images/km_sprite.png) -397px -30px no-repeat;}
to
#nav a.poly:hover, #nav a.poly.clicked, #nav a.poly:focus{background:url(site_images/km_sprite.png) -397px -30px no-repeat;}
and in drop.js before this code
$(this)
.find('ul') /*find all the children ul contained and display*/
add this
$('#nav a.poly').toggleClass('clicked');
and the same change in similar code few lines below it.
@cyberalien thanks for the reply,
I added this #nav a.poly.clicked (I’m assuming it’s suppose to be #nav a.poly:clicked with a semicolon instead of a period).
That’s not a pseudo class is it? I tried it and it didn’t work. It actually disabled the hover for poly.
and the same change in similar code few lines below it.
Was I suppose to add some more code to the drop.js then what you pointed out? Thanks!
Oh Ok I see what you’re saying, add the class=“clicked” to my HTML nav code.
So the problem now is, that the “clicked” toggles on and off every time I hover over a new lin, even if it is not a submenu link.
In first entry replace toggleClass with addClass, on second entry replace it with removeClass
You can do this with css alone quite easily. 
#nav li:hover a{
background-image: url("site_images/km_sprite.png");
background-repeat:no-repeat;
background-position:-397px -30px
}
#nav li:hover li a{background-image:none}
This is what my jquery looks like
$(document).ready(function(){
$('#nav li ul').css({ /*overrides .CSS and hides submenus*/
display: "none",
left: "auto"
});
$('#nav li').hoverIntent(function() { /*plugin smooths everything out compared to just using hover*/
$('#nav a.poly').addClass('clicked');
$(this)
.find('ul') /*find all the children ul contained and display*/
.stop(true, true) /* stops other animations from queing up if mouse moves to fast*/
.slideDown('slow');
},function() {
$('#nav a.poly').removeClass('clicked');
$(this)
.find('ul')
.stop(true,true)
.slideUp('slow');
});
});
My CSS
#nav a.poly:hover, #nav a.poly.clicked, #nav a.poly:focus{
background:url(site_images/km_sprite.png) -397px -30px no-repeat;}
and my HTML
<li><a class="poly" class="clicked" href="#.html"><span>Polysomnography</span></a>
<ul class="sub">
<li><a href="seminars.html">Seminars</a></li>
<li><a href="event.html">Host Your Own Event</a></li>
<li><a href="products.html">Educational Products</a></li>
<!-- <li><a href="#">Consultation Services</a></li> -->
</ul>
Not sure why it’s still not working.
What was wrong with the css solution 
Oh I just tried it! Nice Paul!
Could you explain a little what that did, I’m stil new to CSS.
Yes sure.
The trick is to change the arrow on the anchor when the list is hovered and not when the anchor is hovered. (#nav li:hover a{})
i.e.
#nav li:hover a{ background-image: url("site_images/km_sprite.png"); background-repeat:no-repeat; background-position:-397px -30px }
This means that while the list is hovered all anchors will have a background image applied and that image will remain as long as the list is hovered (which is exactly what’s needed because it’s the hovering on the list that makes the ul appear also).
As this rule would affect all anchors in the nested list also we therefore need one more rule to turn the images off on the nested list.
#nav li:hover li a{background-image:none}
In your original example you were turning the arrow on with a:hover which means that as soon as you moved off the anchor the image disappeared.
My example makes the arrow image dependent on the list being hovered which makes it persistent all the time the list is hovered.