problema con menu

[atty]

ciao a tutti!
sono nuovo del forum!
da autodidatta, con l'aiuto delle guide di questo sito, sto cercando di imparare a scrivere pagine web...
Sto provando a scrivere una semplice pag web... ma ho il seguente problema:
vorrei inserire questo menu http://javascript.html.it/demo/javas...13/esempio.htm nell'header e quest'altro http://javascript.html.it/demo/javas...53/esempio.htm nella colonna laterale. il problema è che dopo aver aggiunto il menu PopMenu nella colonna laterale il primo menu ha smesso di funzionare, ovvero il menu al passaggio del mouse non scompare, ma rimane sempre "esteso"... il problema credo stia nei CSS e non negli script...
ecco cosa ho fatto:

<script src="menuPrincipale/jquery.js" type="text/javascript"></script>
<script src="menuPrincipale/interface.js" type="text/javascript"></script>
<script src="menuPrincipale/rb_menu.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="menuPrincipale/rb_menu.css" media="screen,projection" />

----------------------------------------------------------------------

<div id="menu1" class="menu">
      <div class="rb_toggle"><span>menu &#187;</span></div>
                  <div class="rb_menu">
                      <ul>[*]Home[*]Facts[*]Projects[*]Press[*]Jobs[*]Contacts[*]Log in[/list]
                    </div>
         </div>
        <script type="text/css">
                  $('#menu1').rb_menu();
         </script>

-----------------------------------------------------------------------

.menu {
    font-family: arial, verdana, sans-serif;
    position: relative;
}

.rb_toggle {
    height: 25px;
    line-height: 25px;
    padding: 0 5px 0 0;
}
.rb_toggle span {
    color: #999;
    font-size: 11px;
    font-weight: bold;
    font-family: arial, verdana, sans-serif;
    cursor: hand;
    cursor: pointer;
}
.rb_toggle span.hover {
    color: red;
}

.rb_menu {
    position: absolute;
    left: 50px;
    top: 0;
}

.rb_menu ul,
.rb_menu li {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.rb_menu li {
    float: left;
    height: 25px;
    line-height: 25px;
    padding: 0 10px 0 0;
}
.rb_menu a {
    font-size: 16px;
    font-weight: regular;
    color: #f90;
    text-decoration: none;
}
.rb_menu a:hover {
    text-decoration: underline;
}
.rb_menu a.current {
    color: #999;
}


.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

<link href="menuNavigation/style.css" type=text/css rel="stylesheet" />
      <script src="menuNavigation/mootools83.js" type=text/javascript></script>
      <script type=text/javascript>
              Window.onDomReady(function(){
                    Window.disableImageCache();
                    $S('#popMenu li a').each(function(el) {
                           var effect = el.effect('background-position', {duration: 500, wait: false, transition: fx.Transitions.circOut, fps: 50}).set(-300);
                           el.addEvent('mouseover', effect.goTo.pass(0, effect)).addEvent('mouseout', effect.goTo.pass(-300, effect));
                    });
              });
      </script>

--------------------------------------------------------------------

<div id="navigation" class="menuLaterale">
                     <ul id=popMenu>[*]<span>Slackware</span>[*]<span>Debian</span>[*]<span>Fedora</span>[*]<span>Ubuntu</span>[/list]
           </div>

---------------------------------------------------------------------

.menuLaterale {
        margin:0; 
        padding:0;
}
.menuLaterale ul {
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 0px;
	margin: 0px;
	padding-top: 0px;
	list-style-type: none;
}
.menuLaterale li {
        display: block;
	margin-bottom: 2px;
}
.menuLaterale a {
	display: block;
	background: #eee url('background.png') no-repeat -300px 0px;
	color: #666;
	text-decoration: none;
}
.menuLaterale a:hover {
	color: orange;
}
.menuLaterale a span {
	display: block;
        width: 250px;
}

[atty]

se cambio questo

.rb_toggle span.hover {
    color: red;
}

con questo

.rb_toggle span:hover {
    color: red;
}

la scritta "menu" cambia colore, diventando appunto rossa, invece con span.hover non cambia il suo colore al passaggio del mouse... span.hover è una classe dichiarata nello script (riportato qui sotto)... quindi credo che lo script non venga eseguito...

avete qualche suggerimento? grazie!

$.fn.rb_menu = function(options) {
    var self = this;

    self.options = {
        // transitions: easein, easeout, easeboth, bouncein, bounceout,
        //              bounceboth, elasticin, elasticout, elasticboth
        transition:    'bounceout',
        // trigger events: mouseover, mousedown, mouseup, click, dblclick
        triggerEvent:  'mouseover',
        // number of ms to delay before hiding menu (on page load)
        loadHideDelay : 1000,
        // number of ms to delay before hiding menu (on mouseout)
        blurHideDelay:  500,
        // number of ms for transition effect
        effectDuration: 1000,
        // hide the menu when the page loads
        hideOnLoad: true,
        // automatically hide menu when mouse leaves area
        autoHide: true
    }

    // make sure to check if options are given!
    if(options) {
        $.extend(self.options, options);
    }

    return this.each(function() {
        var menu = $(this).find('.rb_menu');
        var toggle = $(this).find('.rb_toggle span');

        if(self.options.hideOnLoad) {
            // let's hide the menu when the page is loading
            // after {loadHideDelay} milliseconds
            setTimeout( function() {
                menu.hide();

                // add 'hover' class to trigger for css styling
                toggle.hover( function() {
                    $(this).addClass('hover');
                }, function() {
                    $(this).removeClass('hover');
                });
            }, self.options.loadHideDelay);
        }

        // bind event defined by {triggerEvent} to the trigger
        // to open and close the menu
        toggle.bind(self.options.triggerEvent, function() {
            // if the trigger event is click or dblclick, we want
            // to close the menu if its open
            if((self.options.triggerEvent == 'click' || self.options.triggerEvent == 'dblclick') && !self.closed) {
                menu.hide();
            } else {
                menu.show();
            }
        });

        menu.hide = function() {
            if(this.css('display') == 'block' && !self.closed) {
                this.SlideOutLeft(
                    self.options.effectDuration,
                    function() {
                        self.closed = true;
                        self.unbind();
                    },
                    self.options.transition
                );
            }
        }

        menu.show = function() {
            if(this.css('display') == 'none' && self.closed) {
                this.SlideInLeft(
                    self.options.effectDuration,
                    function() {
                        self.closed = false;
                        if(self.options.autoHide) {
                            self.hover(function() {
                                clearTimeout(self.timeout);
                            }, function() {
                                self.timeout = setTimeout( function() {
                                    menu.hide();
                                }, self.options.blurHideDelay);
                            });
                        }
                    },
                    self.options.transition
                );
            }
        }
    });
};