Another hack for IE6

It's no secret that ensuring cross-browser compatibility is one of the main headaches of any web developer. Faced recently with the problem to draw a horizontal popup menu for a Joomla template that would simultaneously work in the latest FireFox, Opera, as well as in IE7 and IE6.

UPD: this topic does not pretend to the novelty or principal convenience of the method described in it. Just another version of the fix.

The menu itself is drawn using the well-known suckerfish.php script.
The essence of the problem was that IE6 does not support the: hover property in CSS.
To ensure cross-browser compatibility, the following was invented:
1) rule succerfish, php as follows: find the function function mosShowListMenu ($ menutype) and replace the line in it
array( "<ul>", "<li >" , "</li>", "</ul>" ), on
array( "<ul>", "<li onmouseover=\"this.className='over';\" onmouseout=\"this.className=this.className.replace('over', '');\">" , "</li>", "</ul>" ),
save, put in the root of the template. Now each element of <li> will change the class name to “over” when you hover the mouse over it, which we will continue to use in CSS for IE.
Further, for IE6 we write css in which we take into account that when hovering the mouse over an element, it is necessary to operate with the class .over something like this
')
.........

ul.nav li.over {
background-image:url(../images/navigation_back.jpg);
position:relative;
}
.........

ul.nav ul li.over {
border:1px solid white;
}
.........

ul.nav li.over ul {
visibility: visible;
}

ul.nav li.over ul li ul {
visibility: hidden;
}

ul.nav li ul li.over ul {
visibility: visible;
}

ul.nav li ul li ul li.over {
border:1px solid white;
}