<?$t='Выпадающее меню на CSS';require_once$_SERVER['DOCUMENT_ROOT'].'/1.php'?>
<style>.menu{font-family:ubuntu,arial;width:750px;height:100px;position:relative;font-size:11px;z-index:8}
.menu ul li a,.menu ul li a:visited{display:block;text-decoration:none;width:104px;height:20px;text-align:center;border:1px solid #fff;background:#710;line-height:20px;font-size:11px;overflow:hidden;color:#fff}
.menu ul{padding:0;margin:0;list-style:none}
.menu ul li{float:left;position:relative}
.menu ul li ul{display:none}
/*specific to non IE browsers*/
.menu ul li:hover a{color:#fff;background:#36f}
.menu ul li:hover ul{display:block;position:absolute;top:21px;left:0;width:105px}
.menu ul li:hover ul li a.hide{background:#6a3}
.menu ul li:hover ul li:hover a.hide{background:#6fc}
.menu ul li:hover ul li ul{display:none}
.menu ul li:hover ul li a{display:block;background:#ddd}
.menu ul li:hover ul li a:hover{background:#6fc}
.menu ul li:hover ul li:hover ul{display:block;position:absolute;left:105px;top:0}
.menu ul li:hover ul li:hover ul.left{left:-105px}</style>
<div class=menu>
<ul>
<li><a class=hide href=#>Раздел 1</A>
<ul>
<li><a href=#>Страница 1.1</A>
<li><a href=#>Страница 1.2</A>
<li><a href=#>Страница 1.3</A>
<li><a class=hide href=#>Страница 1.4</A>
<ul>
<li><a href=#>Страница 1.4.1</A>
<li><a href=#>Страница 1.4.2</A>
<li><a href=#>Страница 1.4.3</A>
</ul>
<li><a href=#>Страница 1.5</A>
<li><a href=#>Страница 1.6</A>
<li><a href=#>Страница 1.7</A>
</ul>
<li><a class=hide href=#>Раздел 2</A>
<ul>
<li><a href=#>Страница 2.1</A>
<li><a href=#>Страница 2.2</A>
<li><a href=#>Страница 2.3</A>
<li><a href=#>Страница 2.4</A>
<li><a href=#>Страница 2.5</A>
</ul>
<li><a class=hide href=#>Раздел 3</A>
<ul>
<li><a href=#>Страница 3.1</A>
<li><a href=#>Страница 3.2</A>
<li><a href=#>Страница 3.3</A>
<li><a href=#>Страница 3.4</A>
<li><a href=3>Страница 3.5</A>
</ul>
<li><a class=hide href=#>Раздел 4</A>
<ul>
<li><a href=#>Страница 4.1</A>
<li><a href=#>Страница 4.2</A>
<li><a href=#>Страница 4.3</A>
<li><a class=hide href=#>Страница 4.4</A>
<UL class=left>
<li><a href=#>Страница 4.4.1</A>
<li><a href=#>Страница 4.4.2</A>
<li><a href=#>Страница 4.4.3</A>
</ul>
</ul>
</ul>
</div>
<p>Как сделать выпадающее меню ограничиваясь только средствами HTML и CSS, без использования скриптов. Источником сего примера является полезнейший ресурс cssplay.co.uk/menus/dd_valid.html. На сайте много различных примеров кода.
<p>Пример выпадающего меню на основе html и css можно скачать бесплатно <a target=_blank href=2.7z>здесь</a>.
<p>HTML код меню выглядит так:
<code><ol>
<li>&lt;div class=menu>
<li>&lt;ul>
<li>&lt;li>&lt;a class=hide href=#>Раздел 1&lt;/a>
<li>&lt;!--[if lte IE 6]>
<li>&lt;a href=#>Раздел 1
<li>&lt;table>&lt;tr>&lt;td>
<li>&lt;![endif]-->
<li>&lt;ul>
<li>&lt;li>&lt;a href=#>Страница 1&lt;/a>
<li>&lt;li>&lt;a href=#>Страница 1.1&lt;/a>
<li>&lt;li>&lt;a href=#>Страница 1.2&lt;/a>
<li>&lt;/ul>
<li>&lt;!--[if lte IE 6]>
<li>&lt;/table>
<li>&lt;/a>
<li>&lt;![endif]-->
<li>&lt;/li>
<li>&lt;li>&lt;a class=hide href=#>Раздел 2&lt;/a>
<li>&lt;!--[if lte IE 6]>
<li>&lt;a href=#>Раздел 2
<li>&lt;table>&lt;tr>&lt;td>
<li>&lt;![endif]-->
<li>&lt;ul>
<li>&lt;li>&lt;a href=#>Страница 2&lt;/a>
<li>&lt;li>&lt;a href=#>Страница 2.1&lt;/a>
<li>&lt;li>&lt;a href=#>Страница 2.2&lt;/a>
<li>&lt;li>&lt;a href=#>Страница 2.3&lt;/a>
<li>&lt;li>&lt;a href=#>Страница 2.4&lt;/a>
<li>&lt;li>&lt;a href=#>Страница 2.5&lt;/a>
<li>&lt;/ul>
<li>&lt;!--[if lte IE 6]>
<li>&lt;/table>
<li>&lt;/a>
<li>&lt;![endif]-->
<li>&lt;/li>
<li>&lt;/ul>
<li>&lt;/div>
</ol></code>
<p>Вы можете добавить дополнительные разделы, при этом необходимо будет изменить в CSS ширину меню. Как вы видите в примере используются условные комментарии, с дополнительным кодом. Это необходимо для браузера IE6.
<p>CSS код:
<code><ol>
<li>.menu{font-family:ubuntu,arial;width:212px;height:100px;position:relative;font-size:11px;z-index:8}
<li>.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}
<li>.menu ul{padding:0;margin:0;list-style:none}
<li>.menu ul li{float:left;position:relative}
<li>.menu ul li ul{display:none}
<li>.menu ul li:hover a{color:#fff;background:#36f}
<li>.menu ul li:hover ul{display:block;position:absolute;top:21px;left:0;width:105px}
<li>.menu ul li:hover ul li a{display:block;background:#ddd}
<li>.menu ul li:hover ul li a:hover{background:#6fc}
</ol></code>
<code><ol>
<li>.menu ul li a.hide,.menu ul li a:visited .hide{display:none}
<li>.menu ul li a:hover{color:#fff;background:#36f}
<li>.menu ul li a:hover ul{display:block;position:absolute;top:21px;left:0;width:105px}
<li>.menu ul li a:hover ul li a{display:block;background:#ddd}
<li>.menu ul li a:hover ul li a:hover{background:#6fc}
</ol></code>
<p>Пример работает во всех наиболее популярных браузерах, включая IE6. Для корректной работы меню необходимо указать тип документа (устарело. 2019).
<?require_once$_SERVER['DOCUMENT_ROOT'].'/2.php'?>