JQuery ready function problems

I am using the dropShadow plugin, and I have a problem with the JQuery ready function.

When I have my code like this:

$(document).ready(function() {
    $('div#shadow').dropShadow();
    $('#navigation li.mainmenu').bind('mouseover', navigation_open);
    $('#navigation li').bind('mouseout', navigation_timer);
});

It will only make the shadow once the drop menu has come out, which is the second function. Any ideas why?

The full code for the JS is:

$(document).ready(
function()
{
   $('#navigation li.mainmenu').bind('mouseover', navigation_open);
   $('#navigation li').bind('mouseout',  navigation_timer);
  });
 var timeout    = 500;
 var closetimer = 0;
 var ddmenuitem = 0;
 var highlightmenu = 0;
 var returncolor = 0;
 var textreturncolor = 0;
 var height = 0;
 var originaltop = 0;
 var resettop = 0;
 var top = 0;
 var shadowExists = 0;
 var dropshadow = 0;
function drawShadow(){
 //draw the shadow only on mouse enter
 dropshadow = $(this).find('ul').dropShadow({top: 4, opacity: 1});
 $('.dropShadow').css('visibility','visible');
 }
 function navigation_open()
 {  navigation_canceltimer();
    navigation_close();
     height = $(this).height();
ddmenuitem = $(this).find('ul');
//Double Liners are above 40 pixels
me开发者_运维知识库nu = ddmenuitem.find('li');
/*===Need to get the top pos. of the item and adjust it since it is absolute;      relative does not work*/
top = ddmenuitem.position().top;
resettop = top;
   if (height > 40){
    top = top - 53;
    }
    else{
    top = top - 35;
    }
ddmenuitem.css('top', top.toString() + "px");
//---ADD A DROP SHADOW...USING JQUERY PLUGIN
ddmenuitem.dropShadow({top: 4, opacity: 1});
$('.dropShadow').css('visibility','visible');
ddmenuitem.css('visibility', 'visible');
returncolor = $(this).find('a#highlight').css('background-color');
textreturncolor = $(this).find('a#highlight').css('color');
highlightmenu = $(this).find('a#highlight').css('background-color','#6487ad');
highlightmenu.css('color','#ffffff');
highlightmenu.css('font-weight','bold');}

 function navigation_close()
 {  if(ddmenuitem){
ddmenuitem.css('visibility', 'hidden');
ddmenuitem.css('top',resettop);
ddmenuitem.removeShadow();
}
if(highlightmenu){ highlightmenu.css('background-color',returncolor);
                    highlightmenu.css('color',textreturncolor);
                    }
 }

 function navigation_timer()
 {
  closetimer = window.setTimeout(navigation_close, timeout);}

 function navigation_canceltimer()
 {  if(closetimer)
    {
    window.clearTimeout(closetimer);
       closetimer = null;}}

 document.onclick = navigation_close;

The HTML would be like this for static:

<div id="shadow">
//images here
</div>

I don't know if you need to see anymore, however the drop menu is just a list, but I want to be able to apply this to the static images and it won't until the drop menus come out.

---

The dropshadow plugin appears to be designed for stationary page elements. From the dropshadow js file:

"This jQuery plug-in adds soft drop shadows behind page elements. It is only intended for adding a few drop shadows to mostly stationary objects, like a page heading, a photo, or content containers"

EDIT: Perhaps you could achieve the effect you're looking for with css? http://robertnyman.com/2010/03/16/drop-shadow-with-css-for-all-web-browsers/

---

The problem lies within the CSS, when calling dropShadow() for the first time the css for class dropShadow is set to hiddent (this was placed there to make the dynamic pieces work in IE (all other browsers fine without it). In the javascript you can see this by the $('.dropShadow').css('visibility','visible'); being called.