Issues with Final Project - Javascript Rollover Nav

I am trying desperately to make my nav button for the javascript rollover work, to no avail.

My idea was that when someone rolls over the Artwork nav button (li with the class 'artwork'), a sub nav (div with class .sub_over) appears with offerings for Painting, Photography, and Writings. I made sure the bottom border for the top nav was applied to each li, as opposed to the whole div, so that I could achieve some flexibility with the javascript.

When the user mouses over the li Artwork, the javascript is supposed to first apply a bottom border of 0px and bottom padding of 10px to the li Artwork - this is to avoid problems when the person mouses down to the sub nav. If there was a bottom border on the Artwork button, this 1px would be considered a mouseout event and would make the sub nav disappear. By eliminating the bottom border and increasing the size of button by 1px on rollover, I create a seamless connection between the button and the sub nav.

Here is my code, which does not work - if anybody has any suggestions, it would be much appreciated!

Event.observe(window, 'load', function() {

setNavBehaviors();

});

function setNavBehaviors() {

$$('.artwork').each( function(el) {

Event.observe(el, 'mouseover', function(evt) {

//make the sub_nav visible by adding visibility to the .sub_over div

showSubNav();

//make sure this even doesn't trigger any other Event observers

Event.stop(evt);

});

//whenever i mouseout of the li, the sub_nav content disappears

Event.observe(el, 'mouseout', function(evt) {

var relTarg = $(evt.relatedTarget);

if (!relTarg.childOf(el) && !(relTarg == el)) {

hideNavContent();

}

});

});

$$('.sub_over').each( function(el) {

Event.observe(el, 'mouseout', function(evt) {

var relTarg = $(evt.relatedTarget); 

if (!relTarg.childOf(el) && !(relTarg == el)) {

hideNavContent();

}

});

});

}

function showSubNav(){

    var ell = $$('.artwork');

ell.each( function(el) {

el.setStyle({

border-bottom: '0px'

padding-bottom: '10px'

});

});

var els = $$('.sub_over');

    els.each( function(el) {

         el.setStyle({

             visibility:'visible'

        });

    });

}

function hideNavContent() {

var els = $$('.sub_over');

    els.each( function(el) {

        el.setStyle({

             visibility:'hidden'

        });

    });

}