Красивое кроссбраузерное меню

[yarixxx]

Сегодня у меня появилась интересная задачка. Нужно сделать меню у которого, при наведении курсора на отдельный пункт у него меняется фон. Все вроде бы просто, но при этом у каждого пункта должна быть своя иконка, под которой этот фон тоже должен меняться. Получается использовать псевдокласс :hover уже нельзя, т.к. иначе, при наведении курсора фон тега a будет закрывать иконку у тега li. А два фона к одному тегу применить пока нельзя.

• Первый пунктa>li>
• Второйa>li> ul>
  Если на li мы повесим фон, а на a иконку - все будет работать только в FF и каких-нибудь других браузерах, но не в IE6. Дело в том, что IE6 поддерживает :hover только для тега a.
  
  Справиться с этой бедой мне поможет JavaScript. Однако я не буду делать несемантичные onmouseover\onmouseout прямо в коде. Эффективнее и изящнее сделать так:
  
  var menuitems = document.getElementById('menu').childNodes; for (var i = 0; i < menuitems.length; i++) { menuitems[i].onmouseover = function() {this.className = this.className + ' miover';}; menuitems[i].onmouseout = function() {this.className = this.className.replace(/ miover/, '');}; }А в CSS прописать свойства для класса miover.
  
  При решении этой задачки мне немного помогла запись Меняем класс у объекта
  
  Проблема не нова, но встречается часто. Поэтому полезно под рукой иметь такой образец.