A freind wants to spice up his menu, (div) to have a border appear on mouseover, stay, then dissappear when the menu is closed. He writes...

Not quite what i wanted. Umm go check the member list here and mouseover a name, then click the name. The border stays on and the menu opens, but when you close the menu, the border goes away, the border also goes away if you mouseover another username. Do you know how to do that?

can sombody advise please? I offered the following, but he says thats not quite what he wants.

if you want the new border to stay you could use example

<div Id="menuItem2_1" onMouseOver="this.style.cssText='margin: 0px; border: solid 1px #00F7FF'">TEST</div>

try it here (mouseover the word TEST) .It really depends what you want.


or make it go away again

<style type="text/css">

.menudef {
position: relative;
left : 0px;
padding: 1px;
border-width: 0px;
cursor: hand;
.menuOver {
position: relative;
left: -1px;
padding: 1px;
border: 1px #00f7ff solid;
cursor: hand;


<div id="menuItem2_1" class="menudef"

It can be done without JavaScript using the a:hover { } css definition.