Javascript/CSS bug in IE

[flycast]

I have a unordered list that I want to show on a mouseover event. The code works fine in Firefox but not IE.

I attache event handlers to the ul that change the id name. I use SubMenu1Show and SubMenu1Hide as id names. The css code for these are below. The problem is that if I use either "display: none" or "visibility: hidden" in SubMenu1Hide then it never becomes visible. It is as "display: none" and "visibility: hidden" once declared cannot be overridden.

Any ideas?

The CSS:
#SubMenu1Show{
visibility: visible;
position: absolute;
border: solid green 1px;
top: 0px;
left: 215px;
}

#SubMenu1Hide{
visibility: hidden;
position: absolute;
display: none;
}

[Robin_reala]

I don't have a copy of IE to test on here but at a first guess it might be that once you've got the object it still contains some reference to the id, and when you change the id you dereference the object? Try setting a class on the object instead and keep the id consistent across all the states.