Salve a tutti!
premetto di esser un giovincello alle prime armi..

ho trovato caruccia la "network bar" del sito Templatemonster (quella in cima alla pagina che scende con il rollover), ed avevo in mente di poterla utilizzare in uno dei miei siti.

Arrivato però al momento della replica, ho incontrato diverse difficoltà.
La scarsa esperienza mi ha portato a credere che sarebbe bastato replicare questo (e le classi css) per avere una cosa paro paro:

<div id="networkBar">

<div id="networkBarPopup" style="display: none;">
<div id="networkBarBanners">

<a target="_blank" href="/network.php?to=3" class="first_popup_banner" onmouseover='this.style.cursor="pointer"'>

</a>
<a target="_blank" href="http://www.templatemonster.com">

</a>
<a target="_blank" href="/network.php?to=2">

</a>

<a target="_blank" href="/network.php?to=5" class="last_popup_banner">

</a>
<div class="clear"></div>
</div>
</div>

<div id="networkBarControls">
<a href="#" id="networkBarButton">



</a>
</div>
</div>


<script type="text/javascript">

$('networkBar').observe('mouseover', function(event) {
Event.stop(event);
});

var mouseOverHandler = function(event) {
$('networkBarPopup').slideDown({duration: 0.3, queue: {position: 'end', scope: 'networkbar', limit: 2}});
$('networkBarButton').stopObserving('mouseover', mouseOverHandler);
document.observe('mouseover', mouseOutHandler);

}

var mouseOutHandler = function(event) {
$('networkBarPopup').slideUp({duration: 0.3, queue: {position: 'end', scope: 'networkbar', limit: 2}});
$('networkBarButton').observe('mouseover', mouseOverHandler);
document.stopObserving('mouseover', mouseOutHandler);
}

$('networkBarButton').observe('mouseover', mouseOverHandler);
</script>


Una volta replicato il codice nel mio documento html però, non sono riuscito a farlo funzionare. Secondo voi perchè?

(Esiste qualche script alternativo molto simile per avere un effetto del genere?)

ringrazio anticipatamente, saluti.