Help! Need my menu to be 'Click on, Roll Off'

Hi there,

Been browsing through the pages of this amazing forum and haven't seen my specific problem addressed, so here goes:

I have this drop-down menu:
http://www.darraghcostello.com/javascript/cms/page.html

that calls this .js file:
http://www.darraghcostello.com/javascript/cms/assets/js/scripts_dropdown.js

I inherited this .js menu from the original designer that the client hired but now the client wants to change how it behaves.

Specificially,

• The menu should not 'drop-down' until it is clicked on by the mouse.
• It should disappear - or roll back up - when the user rolls away with their mouse.

I think this is refered to as 'click on & roll off'.

I'm hoping this should be a fairly straight forward edit to the .js file.

I would be hugely grateful if anyone could take the time to have a go at it.

Deek.


This is the code:

// Dropdown
sfHover = function() {
var sfEls = document.getElementById("nav_dropdown").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls.onmouseover=function() {
this.className+=" sfhover";
}
sfEls.onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

// Generic Scripts
function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}



// Connect Login Scripts
var userpwdFocus = false;
function hadFocus(set)
{
if (set) userpwdFocus = true;
return userpwdFocus;
}



function login()
{
document.cplogin.user.value=document.userid.user.value;
document.cplogin.submit();
}