I have a menu done in CSS. When you mouse over the menu i change the background position in order to display the 'hover' state. I'm using javascript to show/hide <div> when you click on a button to display proper content without reloading the page (Like a tab menu).

To display the menu in a 'hover' state when you have clicked, i use also javascript to move the background position so it stays on the hover state. But when i mouse over my other menu, they do not apply the CSS anymore.

Here is the JS i use on a 'onclick':

function menu()
document.getElementById('menu2').style.backgroundPosition = 'center 0';
document.getElementById('menu1').style.backgroundPosition = 'center -48px';
I guess it have something to do with the fact that i alter the CSS with the JS. But anyone know how to fix this without having to create my mouseover with JS and keep it in CSS?