I'm trying to build a javascript menu using prototype that when you mouseover an element, that element is hidden and a bigger element is shown in its place that closes onmouseout. This is what I have so far to give you an idea, but it doesn't work and is buggy. I'm not sure what the best general approach is:

EDIT: using the prototype refactor from remi bourgarel:

function socialMenuInit(){ 
  var social_menu = $('sociable_menu');
  social_menu.hide();
  var share_words = $('share_words'); 

  Event.observe(share_words,"mouseover",function(){
    share_words.hide();  
    social_menu.show();
  }); 

  Event.observe(social_menu,"mouseout",function(){ 
    social_menu.hide();  
    share_words.show();
  }); 
}

EDIT: The main problem now is that the second bigger menu(social_menu) that is shown on top of the smaller mouseover triggering element(share_words) only closes when you mouseout the smaller trigger element even though this element is hidden.

EDIT: This is the html and css I am using:

<div id="share_words">share</div>
<div id="sociable_menu"></div>

#share_words{
    display: none;
    border: 1px solid white;
    position: absolute;
    right: 320px;
    top:0px;
    padding: 4px;
    background-image: url('/images/icons/group.png');
    background-repeat: no-repeat;
    background-position:7px 6px; 
    text-indent:26px;
    color: white;
    z-index: 15;
}

#sociable_menu{
    border: 1px solid black;
    padding: 5px;
    position: absolute;
    right: 275px;
    top: -10px;
    z-index: 20;
}

Thanks for any help.