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:

that calls this .js file:

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


  • 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.


This is the code:

// Dropdown
sfHover = function() {
var sfEls = document.getElementById("nav_dropdown").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
sfEls[i].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
if (restore) selObj.selectedIndex=0;

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

function login()