CSS3 box-shadow property is Causing The Menu Drop Down Smoothness

I am using jQuery Multi Level CSS Menu #2 for one of my wordpress theme.

But when I add a CSS3 box-shadow property to my main div, for background box shadow, than the menu drop down effect becomes slow down, and is not as smooth as it supposed to be.

But when I remove, the CSS3 box-shadow property from the main div, than the menu drop down effect becomes perfectly smooth. This is my main div:

#main {  background: #fff; margin-top:20px; margin-bottom:0px; -moz-box-shadow: 0 0 10px #000000;
   -webkit-box-shadow: 0 0 10px开发者_运维问答 #000000;
   box-shadow: 0 0 10px #000000;
}

Am I doing something wrong?

Animated shadows are very slow because they have to be recaulculated every time they move. You will see a performance improvement if you reduce the radius of your dropshadow, i.e.:

-webkit-box-shadow: 0 0 3px #000000;

But I would drop dropshadows (ha!) and use a semitransparent border instead:

 border: solid #ccc 10px; /*for older browsers*/
 border: solid rgba(255,255,255,0.3) 10px; /*transparent border*/