<style>
.menu{font-family:ubuntu,arial;width:100%;height:100px;position:relative;font-size:12px;z-index:100}
.menu ul li a,.menu ul li a:visited{display:block;text-decoration:none;color:#000;width:104px;height:20px;text-align:center;color:#fff;border:1px solid #fff;background:#710;line-height:20px;font-size:12px;overflow:hidden}
.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;color:#fff}
.menu ul li:hover ul li:hover a.hide{background:#6fc;color:#000}
.menu ul li:hover ul li ul{display:none}
.menu ul li:hover ul li a{display:block;background:#ddd;color:#000}
.menu ul li:hover ul li a:hover{background:#6fc;color:#000}
.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><!--[if lte IE 6]><a href=#>Пункт 1<table><tr><td>
<![endif]-->
<ul>
<li><a href=#>пункт 1.1</a>
<li><a href=#>пункт 1.2</a>
<li><a class=hide href=#>пункт 1.3 >> (выдвижной вправо)</a><!--[if lte IE 6]><a class=sub href=#>пункт 1.3 >> (выдвижной вправо)<table><tr><td>
<![endif]-->
<ul>
<li><a href=#>пункт 1.3.1</a>
<li><a href=#>пункт 1.3.2</a>
</ul>
<!--[if lte IE 6]></table></a><![endif]-->
<li><a href=#>пункт 1.4</a>
<li><a href=#>пункт 1.5</a>
</ul>
<!--[if lte IE 6]></table></a><![endif]-->
<li><a class=hide href=#>Пункт 2</a><!--[if lte IE 6]><a href=#>Пункт 2<table><tr><td>
<![endif]-->
<ul>
<li><a href=#>пункт 2.1</a>
<li><a href=#>пункт 2.1</a>
</ul>
<!--[if lte IE 6]></table></a><![endif]-->
<li><a class=hide href=#>Пункт 3</a><!--[if lte IE 6]><a href=#>Пункт 3<table><tr><td>
<![endif]-->
<ul>
<li><a href=#>пункт 3.1</a>
<li><a href=#>пункт 3.2</a>
<li><a class=hide href=#><< пункт 3.3 (выдвижной влево)</a><!--[if lte IE 6]><a class=sub href=#><< пункт 3.3 (выдвижной влево)<table><tr><td>
<![endif]-->
<ul class=left>
<li><a href=#>пункт 3.2.1</a>
<li><a href=#>пункт 3.2.2</a>
</ul>
<!--[if lte IE 6]></table></a><![endif]-->
</ul>
<!--[if lte IE 6]></table></a><![endif]-->
</ul>
</div>
<p>Пример выпадающего меню на основе html и css можно скачать бесплатно <a target=_blank href=3.7z>здесь</a>.
<p>Достоинства:
<ol>
<li>основа html и css;
<li>маленький размер программного кода.
</ol>
<p>Недостатки:
<ol>
<li>жесткий размер менюшек по ширине в пикселях (слова могут элементарно там не поместиться);
<li>под менюшкой остается "мертвое" поле примерно в 60 пикселей (загнать туда текст практически невозможно, разве что поиграть блоками-слоями, но это еще не каждому дано);
<li>обязательно (принудительно, я бы сказал) в начале документа должен присутствовать DOCTYPE, что может нарушить структуру (каркас разметки) сайта (устарело. 2019).
</ol>