Drop menus with a mask

Question

please see the "yoga" button on the menu here:
http://hearightnow.com/yogamater/
if the mouse is under the button (outside the mask) the button still activates
is there a way I can create a shape &/or script to "mask" the EventListener much like how the graphic is masked?
(the space under the buttons will eventually contain random photos)
currently the menu uses this script:
addEventListener(Event.ENTER_FRAME,upyoga);
stop();
var speed:Number=.3;
function upyoga(e:Event) {
if ((yoga_menu.mouseY<yoga_menu.height&&yoga_menu.mouseY>0) &&
(yoga_menu.mouseX<yoga_menu.width&&yoga_menu.mouseX>0)) {
yoga_menu.y-=(-58+yoga_menu.y)*speed;
} else {
yoga_menu.y-=(-134+yoga_menu.y)*speed;

Answer 1

i didnt wrote the right or complete syntaxis above. if you really place something like:
mouseover(yoga_menu)
  over_yoga = true;
move_out{
  over_yoga=false;
etc..
you will get an error. what i meant was: set a handler, just like 'enterframe' (so i assume you know how to place handlers), for the mouse over, linked with
the yoga block sprite that sets to 'true' a boolean, and another handle that sets the same bool as false, in the event of mouse_out, that sets the boolean to false. those handlers will be run only if the event reaches the yoga block sprite, so if you place the mouse over the white chunk that covers the menu, the event will not reach the sprite and the bool will not change the state
a better syntax would be something like
function yoga_over_handle(event:MouseEvent):void {
    over_yoga = true;
yogamenu.addEventListener(MouseEvent.MOUSE_OVER, yoga_over_handle)
also, consider this: when you move the mouse over the options in the yoga menu, it may trigger a 'MOUSE_OUT' in yoga_menu (since now is over the options, and not over yoga directly), so you may want to make some handlers that keep the bool as true for each option in the menu (a drag, i know, if you decide to go with this option), in case when you move over an option in the menu, the menu starts hidding