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

//********************************
Создаем файл с именем menu.html открываем блокнотом и заполняем:
//********************************
<link rel="stylesheet"type="text/css"href="http://helpw.ru/style.css"/>
<script type="text/javascript"src="menu.js">
</script>
<Body vlink=Darkred >
<ul id=nav>
<li><a href="http://helpw.ru/javascript:void(0);" >meny1</a>
<ul id=nav2>
<li><a href="http://helpw.ru/"> meny11</a>
<li><a href="http://helpw.ru/">meny12</a>
<li><a href="http://helpw.ru/">meny13</a>
<li><a href="http://helpw.ru/">meny14</a>
<li><a href="http://helpw.ru/">meny15</a>
</ul></ul>
<ul id=nav21>
<li><a href="http://helpw.ru/javascript:void(0);">meny2</a>
<ul id=nav22>
<li><a href="http://helpw.ru/">meny21</a>
<li><a href="http://helpw.ru/">meny22</a>
<li> <a href="http://helpw.ru/">meny23</a>
<li><a href="http://helpw.ru/">meny24</a>
</ul></ul>
//********************************
id=nav id=nav21 id=nav2 id=nav22 имена списка меню.
Создаем файл с именем menu.js открываем блокнотом и заполняем:
//********************************
startList = function() {
function p(){
for (var i=0; inodes[i].onmouseover = function() {
this.className += " over";
}
nodes[i].onmouseout = function() {
this.className = this.className.replace(new RegExp(" over\\b"), "");
} } }
var nodes = document.getElementById("nav").getElementsByTagName("LI");
p();
var nodes = document.getElementById("nav21").getElementsByTagName("LI"); br>p();
var nodes = document.getElementById("nav41").getElementsByTagName("LI");
p();
var nodes =document.getElementById("nav51").getElementsByTagName("LI");
}
if (window.attachEvent) window.attachEvent("onload", startList);
//********************************
nav,nav21,nav41,nav51 имена списка. Если необходимо увеличить число элементов меню дописываем
var nodes = document.getElementById("Имя списка").getElementsByTagName("LI");
p();
Создаем файл с именем menu.css открываем блокнотом и заполняем:
//********************************

//* START CSS MENU */

//********************************
Задаем вывод, вместо left можно иcпользовать top.
Знак учитывается.
//********************************

ul#nav{width:116px;border-bottom:0px;color-bottom:#F4A460;}
ul#nav2{width:200px;z-index:0;left:114px;}
ul#nav21{width:116px;border-bottom:0px solid #F4A460;}
ul#nav22{width:200px;z-index:0;left:114px;}
ul#nav41{width:116px;border-bottom:0px solid #F4A460;}
ul#nav42{width:200px;z-index:0;left:114px;}
ul#nav51{width:116px;border-bottom:0px solid #F4A460;}
ul#nav52{width:200px;z-index:0;left:114px;}

li ul{position:absolute;left:98px;top:0px;display:none;}
ul{margin:0px;padding:0px;list-style:none;}
ul li{position:relative;border-top:solid 1px #99DFFF;
border-left:solid 1px #99DFFF;border-right:solid 1px #99DFFF;}
* html ul li{float:right;}
* html ul li a{height:1%;}
li:hover ul, li.over ul{display:block;}

//********************************
Задаем отображение, шрифт, цвет и пр.
//********************************

#nav a{background-color:#87CEEB;color:#B22222;display:block;padding:
1px;margin:0px;text-align:center;
text-decoration:none;FONT-family:Cooper Black;Verdana, Arial;
FONT-size:11pt;FONT-weight:400;}
#nav a:hover{background-color:#F4A460;color:#000000;text-decoration:
none;text-align:center;FONT-size:11pt;FONT-weight:400;}
#nav21 a{background-color:#87CEEB;color:#B22222;display:block;padding:
1px;margin:0px;text-align:center;
text-decoration:none;FONT-family:Cooper Black;Verdana, Arial;FONT-size:
11pt;FONT-weight:400;}
#nav21 a:hover{background-color:#F4A460;color:#000000;text-decoration:
none;text-align:center;FONT-size:11pt;FONT-weight:400;}
#nav41 a{background-color:#87CEEB;color:#B22222;display:block;padding:
1px;margin:0px;text-align:center;
text-decoration:none;FONT-family:Cooper Black;Verdana, Arial;FONT-size:
11pt;FONT-weight:400;}
#nav41 a:hover{background-color:#F4A460;color:#000000;text-decoration:
none;text-align:center;FONT-size:11pt;FONT-weight:400;}
#nav51 a{background-color:#87CEEB;color:#B22222;display:block;padding:
1px;margin:0px;text-align:center;
text-decoration:none;FONT-family:Cooper Black;Verdana, Arial;FONT-size:
11pt;FONT-weight:400;}
#nav51 a:hover{background-color:#F4A460;color:#000000;text-decoration:
none;text-align:center;FONT-size:11pt;FONT-weight:400;}
//* END CSS MENU */

//********************************
Для разбора данного примера необходимы знания стилей или английского языка.
Скачать рабочий пример.
//********************************

Web программирование Pascal&Delphi Бeйсик

Цена на наручные часы в России

цены EVO 3D HTC

Интернет-магазин сексуального и эротического нижнего женского белья.