Javascript меню, которое зависает над исходным элементом

Question

Я пытаюсь создать javascript-меню, используя прототип, который при наведении на мышь элемента, этот элемент скрыт и на его месте отображается более крупный элемент, который закрывает onmouseout. Это то, что я до сих пор даю вам, но это не работает и глючит. Я не уверен, что лучший общий подход:

EDIT: с помощью прототипа рефакторинга от 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: Основная проблема сейчас является то, что вторым больше меню (social_menu), который показанный поверх элемента триггера меньшей длины мыши (share_words), закрывается только тогда, когда вы нажимаете на элемент меньшего триггера, даже если этот элемент скрыт.

EDIT: Это HTML и CSS Я использую:

<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; 
} 

Спасибо за любую помощь.

Answer 1

Вы не используете prorotype ... попробуйте это

function socialLinkInit(){  
    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();  
    }); 
} 

Но я буду нужен ваш HTML-код, чтобы быть более полезным