Первый вариант
Разместите эту ссылку на CSS файл между тегами <head> </head>:
<link rel="stylesheet" type="text/css" title="mymenu" href="http://vvfed1.narod.ru/mycss/pro_dropdown_2.css" />
Доброе утро
|
| ||||
Выпадающее горизонтальное меню для сайта
Cкопируйте код и установите между указанными тегами
Код HTML(здесь три варианта выпадающих окон, ненужное удалить, количество страниц по необходимости) между тегами <body> </body>:
<table align="left">
<tr><td height="33" valign="top">
<ul id="nav">
<li class="top"><a href="#1" id="L1" class="top_link"><span class="down">главная</span> </a> </li>
<li class="top"><a href="#2" id="L2" class="top_link"><span class="down">один выпад</span> </a>
<ul class="sub">
<li><a href="#1">один 1</a></li>
<li><a href="#2">один 2</a></li>
<li><a href="#3">один 3</a></li>
</ul></li>
<li class="top"><a href="#3" id="L3" class="top_link"><span class="down">два выпада</span> </a>
<ul class="sub">
<li><a href="#2">два 1</a>
<ul>
<li><a href="#1">два 11</a></li>
<li><a href="#2">два 12</a></li>
<li><a href="#3">два 13</a></li>
</ul></li>
<li><a href="#2">два 2</a></li>
<li><a href="#2">два 3</a></li>
</ul></li>
<li class="top"><a href="#4" id="L4" class="top_link"><span class="down">три выпада</span> </a>
<ul class="sub">
<li><a href="#3">три 1</a>
<ul>
<li><a href="#1">три 11</a>
<ul>
<li><a href="#1">три 111</a></li>
<li><a href="#2">три 112</a></li>
<li><a href="#3">три 113</a></li>
</ul></li>
<li><a href="#1">три 12</a>
<ul>
<li><a href="#1">три 121</a></li>
<li><a href="#2">три 122</a></li>
<li><a href="#3">три 123</a></li>
</ul></li>
</ul></li>
<li><a href="#3">три 2</a></li>
<li><a href="#3">три 3</a></li>
</ul></li>
<li class="top"><a href="#5" id="L5" class="top_link"><span class="down">еще <b>- (?)</b></span> </a>
<ul class="sub">
<li>а сколько еще надо???</li>
</ul></li>
</ul>
</td></tr></table>
Второй вариант
Код CSS (цвет текста и фона меняйте по вкусу) между тегами <head> </head>:
<style type=text/css>
#gormen,#gormen ul{list-style:none;background-color:#444;font:16px/24px Verdana, Arial, Helvetica, sans-serif;margin:0;padding:0}
#gormen{height:24px;width:680px;border:1px solid #000}
#gormen li{float:left;position:relative}
#gormen a{display:block;width:95px;color:#FFFF00;text-align:center;text-decoration:none;border-right:1px solid #000;padding:0 20px}
#gormen a:hover{background-color:#ccc;color:#000}
#gormen ul{border:1px solid
#000;border-top:0;border-bottom:0;visibility:hidden;width:133px;position:absolute;top:24px;left:0}
#gormen ul a{border:0;border-bottom:1px solid #000;width:93px}
#gormen li:hover li ul,#gormen li.jshover li ul{border-top:1px solid
#000;top:-1px;left:118px;visibility:hidden}
#gormen li:hover ul,#gormen li.jshover ul,#gormen li:hover li:hover ul,#gormen li.jshover li.jshover ul{visibility:visible}
#gormen li:hover,#gormen li.jshover,,#gormen li.jshover{background-color:#333}</style>
</style>
Код HTML (количество страниц по необходимости) между тегами <body> </body>:
<ul id="gormen">
<li><a href="#">Главная</a></li>
<li><a href="#"> Страница 1 </a>
<ul>
<li><a href="#">Стр.1.1</a></li>
<li><a href="#">Стр.1.2</a></li>
<li><a href="#">Стр.1.3</a></li>
</ul>
</li>
<li><a href="#"> Страница 2 </a>
<ul>
<li><a href="#">Стр.2.1</a></li>
<li><a href="#"> Стр. 2.2 </a>
<ul>
<li><a href="#">Стр.2.2.1</a></li>
<li><a href="#">Стр.2.2.2</a></li>
<li><a href="#">Стр.2.2.3</a></li>
</ul>
</li>
<li><a href="#">Стр.2.3</a></li>
</ul>
</li>
<li><a href="#">Страница 3</a></li>
<li><a href="#">Страница 4</a></li>
</ul>
