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.