Сразу оговорюсь.

С одной стороны подобного рода меню с точки зрения SEO не пользуются респектом у поисковиков. Возможно, кому-то это покажется не важным, но, тем не менее, для тех, кто занимается продвижением и более того затачивает свои ресурсы с единственной, но весьма благородной целью так или иначе заработать на хлеб с маслом, а может и не только, стоит обратить на это самое пристальное внимание.

С другой стороны, придание динамики интерфейсу web-страницы имеет и свои положительные моменты. Но вот, на сколько удобны данные меню не для вас (мало ли, что нравиться лично вам), а для пользователя, решать придется самостоятельно с оглядкой именно на него.

Как вы понимаете, проблем, а мы говорим о самых простых меню созданных с использованием псевдокласса :hover, нет, за исключением IE6. Все не однократно описывалось в различных источниках, да и сам грешен :)

Чтобы привести в чувство любимый браузер, как не крути, а без скрипта не обойтись. Но не будем изобретать велосипед. Шести строк кода для этих целей, вполне достаточно, что полностью соответствует представлениям автора о правилах написания не только html-кода и стилей, где лаконичность и компактность оного ставится, чуть ли не на первое место.

Яркое тому подтверждение пост "Комплект шаблонов", где в таблице стилей состоящей чуть более, чем из двадцать строчек, присутствуют самые необходимые вещи - начиная от разметки на четыре шаблона, до решения проблемы иллюзии одинаковой высоты колонок, совместно с эмуляцией min/max width для IE6, без так надоевшего expression :)

Скрипт в не котором смысле универсален, заточен конкретно под IE6 и останавливаться на нем более подробно нет никаких причин. Тем более, что его без всяких изменений можно использовать и в горизонтальном и в вертикальном меню.

Скрипт menu.htc

  <attach for=element event=onmouseover handler=topm> 
  <attach for=element event=onmouseout handler=verm>   
  <script> 
     function topm(){element.className='navigation';}  
     function verm(){element.className='';}
  </script>

Во всех случаях должен находиться в папке css, рядом с основным файлом стилей, в котором и обитают стилевые правила для меню.

html-код особенностей не имеет. Обычный список с необходимой степенью вложений.

Стили, описывающие поведение меню, частично оптимизированы, но в них легко разобраться, и есть возможность все настроить в соответствии со своими вкусами и предпочтениями.

Горизонтальное меню, располагается по центру страницы. Методика, как это сделать, довольно подробно освещена здесь.

Смотрим

С рабочим вариантом горизонтального меню в боевых условиях для nano-CMS от Мастера Lasto, можно ознакомится по этому линку.

О конкретной интеграции в скрипты Вадима, как то - блог, портатор, та же nano-CMS, поговорим чуть позже в одной из следующих публикаций.