Can I release DOM script control of an element back to CSS?

JavaScript
1

I have a CCS-driven drop-down menu (horizontal main menu, drop-down sub-menus). It works fine. Now I want to add a clickable link to one of the items in a sub-menu, to open a form elsewhere on the page. At the same time I want the submenu to disappear. I’ve achieved all that, but the submenu no longer appears when I hover over the top menu. I think this must be because the DOM script positioning is over-riding the CSS. I’m wondering if I can ‘cancel’ the DOM scripting and return control to the CSS ?

Here’s the code which hides the sub-menu (which has ID of s9).


document.getElementById("s9").style.left ="-999px";

The sub-menu disappears instantly (back to the position set by the CSS on page load). If I could follow this line with another releasing the DOM control, all would be well.

An alternative would be to move the mouse off the menu items, but I am told it’s not possible to move the mouse-pointer with JS for security reasons.

I’ve looked at some ‘onmouseover’ and ‘onmouseout’ combinations, but they all over-ride the CSS, so the sub-menu is either permanently showing or permanently off screen.

The page can be seen at: http://www.holidaymullandiona.com. Hover on ‘Places to Stay’, then click ‘SEARCH’. A search form duly opens, and the sub-menu disappears.
BUT now the sub-menu fails to appear when you hover on ‘Places to Stay’.

2

You can remove any inline styles, either in the html source or added with script,
by setting the element.style.cssText=‘’;

3

Thank you mrhoo. That’s pretty simple, but really good to know. I’ve got several books on DOM scripting, but haven’t seen it mentioned.
I did find that having set the style via DOM to position the sub-menu off-screen I had to impose a timeout delay before cancelling, otherwise it came straight back ! 5ms gave inconsistent results, but 10ms is enough.