Display drop shadow question

I have a basic CSS menu, that has submenus. I am wanting to add a drop shadow to the drop down boxes, using jQuery.
I have found a nifty jQuery plugin that does shadows:
http://dl.dropbox.com/u/1546882/jquery.dropshadow.js

Only problem is, the drop down shadow displays whether or not the submenu is showing/visible.

The menu structure is rather simple with UL and LI:
<ul class=“submenu submenu-1”>
<li class=“item item-1”><a href=“http://www.mysite.com/page1”>Page 1</a></li>
<li class=“item item-2”><a href=http://www.mysite.com/page2">Page 2</a></li>
</ul>

There is only currently 1 submenu, but I will probably be adding more (with the same parent, not sub-sub menus).

How can I, with jquery, make the dropshadow display only when these submenus (UL) are visibility:visible, and not all the time (like currently)?

Drop shadow syntax:


jQuery(selector).dropShadow(options);  // Creates new drop shadows
jQuery(selector).redrawShadow();       // Redraws shadows on elements
jQuery(selector).removeShadow();       // Removes shadows from elements
jQuery(selector).shadowId();           // Returns an existing shadow's ID

Many thanks.

tried some other things, and still no luck.

Any ideas?

Something like the following doesn’t seem to work, still displays 100% of the time (even if visibility:hidden):


jQuery("ul.submenu:not(:visible)").removeShadow();
jQuery("ul.submenu:visible").dropShadow();

and


jQuery("ul.submenu:not(:hidden)").dropShadow();
jQuery("ul.submenu:hidden").removeShadow();

Also I am not sure if this would work if there was more than 1 submenu?!?