Menu, needs a bit of js..I think

[arbel]

I've created this menu using css, and a javascript for the menu.

but, there's one small thing missing. I need to get the menu buttons to stay in their hover state when the mouse is over the drop down menu....i think the only way to do that is using javascript....

can anyone point me the right direction?

here's the link:

http://www.arbel-designs.com/css_test/

thanks

idan

[djr33]

I like it how it is. If you make them all stay in the hover state, what's the point? They won't vary, at all, since you'll never see the "normal" state.
The answer, then, is to just change the "normal" state to match the "hover" state. No?

[arbel]

on every page, one will always be in the hover state (white and lowered).
but I want it so that when the user moves over another link, it also changes to the hover state (white lowered). This works.

The problem is that when the dropmenu opens, and the user moves down the menu, the link goes back go the normal state (green raised).

I want to make so when the user hovers over the drop menu, the primary link will stay in the hovered state.

[arbel]

Hello,

I managed to write a script that will fix the problem...but i'm encountering a wiered problem with ie6. when you move from one link to another in drop menu, ie caches events of mouseout and mouseover that are on the div for the entire menu.

It works great in ff and ie7.

but not ie...here's the code (my first script ever so i'm petty sure it can be done better).
[HIGHLIGHT="JavaScript"]
// JavaScript Document

var DropFix =
{
init:function()
{
var navigationDiv = document.getElementById(DropFix.navId);
var navigationLinks = navigationDiv.getElementsByTagName("a");
for (var i=0; i<navigationLinks.length; i++)
{
var rel = navigationLinks[i].getAttribute("rel");

if(rel && rel.length > 0)
{
dropLinks = document.getElementById(rel);
Core.addEventListener(dropLinks, "mouseover", DropFix.changeClassListener);
Core.addEventListener(dropLinks, "focus", DropFix.changeClassListener);
Core.addEventListener(dropLinks, "mouseout", DropFix.returnClassListener);
Core.addEventListener(dropLinks, "blur", DropFix.returnClassListener);

}
}
},
changeClassListener:function(event,id)
{

DropFix.changeClass(this);

},
returnClassListener:function(event)
{
DropFix.returnClass(this);
},

changeClass: function(link)
{
var linkToChange = link.getAttribute("id");
var navigationDiv = document.getElementById(DropFix.navId);
var navigationLinks = navigationDiv.getElementsByTagName("a");
for (var i=0; i<navigationLinks.length; i++)
{
var rel = navigationLinks[i].getAttribute("rel");
if(rel == linkToChange) {
aToLi = navigationLinks[i].parentNode;
aToLi.className = "selected";

}
}

},
returnClass: function(link)
{
var linkToChange = link.getAttribute("id");
var navigationDiv = document.getElementById(DropFix.navId);
var navigationLinks = navigationDiv.getElementsByTagName("a");

for (var i=0; i<navigationLinks.length; i++)
{
var rel = navigationLinks[i].getAttribute("rel");
if(rel == linkToChange) {
Core.removeClass(navigationLinks[i].parentNode,"selected");
}
}

}
}
function DropLinkChange(navId) {
DropFix.navId = navId;
Core.start(DropFix);
}
[/HIGHLIGHT]


any help would be greatly appreciated.