Ars Longa, Vita Brevis

Реализация кросс-браузерного горизонтального меню на чистом CSS 3 без использования JavaScript

Ранее я уже говорил о причинах, побудивших меня сделать меню на чистом CSS без использования JavaScript. Борясь с IE6, у меня получилась красивая версия вертикального меню — его реализация оказалась проще. Теперь обещанное горизонтальное меню.

Требования, которые я поставил:

  1. Нельзя использовать JavaScript;
  2. Полученный код (CSS и XHTML) должен успешно проходить валидацию.

Разметка для тестового примера была взята из этой статьи (которая и сподвигла меня на написание своего меню). В предыдущей статье код пришлось немного переработать (а всё из-за необходимости поддерживать IE6), и именно эту переработанную версию кода мы будем использовать.

[-]
View Code HTML
<ul id="menu">
    <li>
        <a href="#">Renaissance<!--[if IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tbody><tr><td><![endif]-->
        <ul>
            <li><a href="#">Brunelleschi</a></li>
            <li><a href="#">Alberti</a></li>
            <li><a href="#">Palladio</a></li>
            <li><a href="#">Michelangelo</a></li>
            <li><a href="#">Bramante</a></li>
        </ul>
        <!--[if lte IE 6]></td></tr></tbody></table></a><![endif]-->
    </li>

    <li>
        <a href="#">Art Nouveau<!--[if IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tbody><tr><td><![endi