AnyLink Vertical AND Dropdown Menus

[ddadmin]

Well, having a drop down menu have a completely unique style of its own can be done by first removing the CSS that styles the ID of the drop down menu:

#dropmenudiv{
position:absolute;
background-color: #E3FFB0;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
}

#dropmenudiv a:hover{ /*hover background color*/
background-color: #C7FF5E;
}

Then, create separate classes with all the necessary CSS targeting either the top or side drop down menu. You can't define more than one drop down menu if that's what you're asking, as all menus on the page share that menu (with id="#dropdowndiv").

[iowebpub]

and not matter what I try, i always get the sidemenudiv style sheet, I never got the topmenudiv style sheet no matter what i passed as istop.

[ddadmin]

I assume you've defined two CSS classes, something like:

.topmenudiv{
position:absolute;
background-color: lightblue;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}

.topmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
}

.topmenudiv a:hover{ /*hover background color*/
background-color: #C7FF5E;
}

.sidemenudiv{
position:absolute;
background-color: silver;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}

.sidemenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
}

.sidemenudiv a:hover{ /*hover background color*/
background-color: #C7FF5E;
}

[thirdcherry]

For Using Both Drop Down and Vertical forms, i found the best solution for me was to keep both the .js separate, and simply rename one of them, so that all occurrences of the functions/divs were named different from the Drop Down version. In my case, I used "sidemenu" for the function. And "sidemenudiv" for the div names. I also made sure all my side menu array elements were named "side1", "side2" etc...

For Multiple Class Function:

change:

dropmenuobj.className=istop? topmenudiv : sidemenudiv

to:

switch (istop)
{
case 1:
  dropmenuobj.className='yourclassone'
  break    
case 2:
  dropmenuobj.className='yourclasstwo'
  break
case 3:
  dropmenuobj.className='yourclassthree'
  break
default:
  dropmenuobj.className='yourclassdefault'
}

your in page link:

<a href="#" onMouseover="sidemenu(this, event, side2, '150px', 1)" onMouseout="delayhidemenu()"

hope this helps others who may not have found any other ways.