Выпадающее меню на CSS

Как сделать выпадающее меню ограничиваясь только средствами HTML и CSS, без использования скриптов. Источником сего примера является полезнейший ресурс cssplay.co.uk/menus/dd_valid.html. На сайте много различных примеров кода.

Пример выпадающего меню на основе html и css можно скачать бесплатно здесь.

HTML код меню выглядит так:

1. <div class=menu>
2. <ul>
3. <li><a class=hide href=#>Раздел 1</a>
4. <!--[if lte IE 6]>
5. <a href=#>Раздел 1
6. <table><tr><td>
7. <![endif]-->
8. <ul>
9. <li><a href=#>Страница 1</a>
10. <li><a href=#>Страница 1.1</a>
11. <li><a href=#>Страница 1.2</a>
12. </ul>
13. <!--[if lte IE 6]>
14. </table>
15. </a>
16. <![endif]-->
17. </li>
18. <li><a class=hide href=#>Раздел 2</a>
19. <!--[if lte IE 6]>
20. <a href=#>Раздел 2
21. <table><tr><td>
22. <![endif]-->
23. <ul>
24. <li><a href=#>Страница 2</a>
25. <li><a href=#>Страница 2.1</a>
26. <li><a href=#>Страница 2.2</a>
27. <li><a href=#>Страница 2.3</a>
28. <li><a href=#>Страница 2.4</a>
29. <li><a href=#>Страница 2.5</a>
30. </ul>
31. <!--[if lte IE 6]>
32. </table>
33. </a>
34. <![endif]-->
35. </li>
36. </ul>
37. </div>

Вы можете добавить дополнительные разделы, при этом необходимо будет изменить в CSS ширину меню. Как вы видите в примере используются условные комментарии, с дополнительным кодом. Это необходимо для браузера IE6.

CSS код:

1. .menu{font-family:ubuntu,arial;width:212px;height:100px;position:relative;font-size:11px;z-index:8}
2. .menu ul li a,.menu ul li a:visited{display:block;text-decoration:none;width:104px;height:20px;text-align:center;color:#fff;border:1px solid #fff;background:#710;line-height:20px;font-size:11px;overflow:hidden}
3. .menu ul{padding:0;margin:0;list-style:none}
4. .menu ul li{float:left;position:relative}
5. .menu ul li ul{display:none}
6. .menu ul li:hover a{color:#fff;background:#36f}
7. .menu ul li:hover ul{display:block;position:absolute;top:21px;left:0;width:105px}
8. .menu ul li:hover ul li a{display:block;background:#ddd}
9. .menu ul li:hover ul li a:hover{background:#6fc}

Пример работает во всех наиболее популярных браузерах, включая IE6. Для корректной работы меню необходимо указать тип документа (устарело. 2019).