Библиотека Javascript. SE@RCHER

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML><HEAD> <META http-equiv=Content-Type content="text/html; charset=windows-1251"> <title>Меню горизонтальное с подменю без использования скриптов</title> <STYLE type=text/css> #boxmenu {BACKGROUND: #7da6ee;BORDER: 0px #000 solid;POSITION: relative;LEFT: 335px;WIDTH: 357px;Z-INDEX: 1/*для IE*/} #m * {BORDER-COLLAPSE: collapse} #m {FONT: 10pt Verdana, sans-serif;FONT-WEIGHT: bold} .a {BACKGROUND: #7da6ee;COLOR: #000;TEXT-DECORATION: none} * HTML #m .a table {FONT: 8pt Verdana, sans-serif;DISPLAY: block} .a table {FONT: 8pt Verdana, sans-serif;DISPLAY: block} #m table {DISPLAY: none} #m table A {DISPLAY: none} #m .a:hover {BACKGROUND: #000;COLOR: #fff} .menu:hover {BACKGROUND: #7da6ee;COLOR: #000;BORDER: #000 0px solid/*для OP*/} #m .a:hover table {BACKGROUND: #7da6ee;BORDER: #000 1px solid;POSITION: absolute;DISPLAY: block;WHITE-SPACE: nowrap} .menu:hover table {BACKGROUND: #7da6ee;BORDER: #000 1px solid;POSITION: absolute;DISPLAY: block;WHITE-SPACE: nowrap} #m .a:hover table A {COLOR: #000;TEXT-DECORATION: none;BORDER-RIGHT: #7da6ee 1px solid;/*дрожание по горизантали*/PADDING: 1px 12px;/*отступы выпад меню*/DISPLAY: block;WHITE-SPACE: nowrap} #m .menu:hover table A {COLOR: #000;TEXT-DECORATION: none;BORDER-RIGHT: #7da6ee 1px solid;PADDING: 1px 12px;/*отступы в подменю выпад. меню*/DISPLAY: block;WHITE-SPACE: nowrap} #m .a:hover table A:hover {BACKGROUND: #f5f5dc;COLOR: #000;TEXT-DECORATION: none;BORDER: #000 1px solid;/*дрожание по вертикали*/PADDING-RIGHT: 12px;PADDING-TOP: 0px;PADDING-LEFT: 11px;PADDING-BOTTOM: 0px;DISPLAY: block} #m .menu:hover table A:hover {BACKGROUND: #f5f5dc;COLOR: #000;TEXT-DECORATION: none;BORDER: #000 1px solid;PADDING-RIGHT: 12px;padding-top: 0px;PADDING-LEFT: 11px;PADDING-BOTTOM: 0px;DISPLAY: block} .menu {MARGIN: 1px;FLOAT: left} .menu1 {FONT: 8pt Verdana, sans-serif;FONT-WEIGHT: bold;COLOR: #000} .a1 {DISPLAY: none} .menu1:hover .a1 {PADDING: 0px 115px;/*для FF*/POSITION: absolute;DISPLAY: block;FLOAT: left;LEFT: -40px;TOP: 5px} .menu1:hover {DISPLAY: block} .menu2 {FONT: 8pt Verdana, sans-serif;FONT-WEIGHT: bold;COLOR: #000} .a2 {DISPLAY: none} .menu2:hover .a2 {PADDING: 0px 115px;/*для FF*/POSITION: absolute;DISPLAY: block;FLOAT: left;LEFT: -35px;TOP: 5px} .menu2:hover {DISPLAY: block} .menu3 {FONT: 8pt Verdana, sans-serif;FONT-WEIGHT: bold;COLOR: #000} .a3 {DISPLAY: none} .menu3:hover .a3 {PADDING: 0px 115px;/*для FF*/POSITION: absolute;DISPLAY: block;FLOAT: left;LEFT: -30px;TOP: 5px} .menu3:hover {DISPLAY: block} * HTML #m .a table {FONT: 8pt Verdana, sans-serif;DISPLAY: block} </STYLE> </head> <body bgcolor="#FFFFFF" text="#000000"> <DIV id="boxmenu"> <TABLE><TR><TD> <DIV id="m"> <DIV class="menu"><A class="a" href="#">Меню 0</A></DIV> <DIV class="menu"><A class="a" href="#">Меню 1<BR>  <TABLE> <TR><TD> <DIV><A href="#">Пункт 1</A></DIV> <DIV><A href="#">Пункт 2</A></DIV> <DIV><A href="#">Пункт 3</A></DIV> <DIV><A href="#">Пункт 4</A></DIV> <DIV><A href="#">Пункт 5</A></DIV> </TD></TR> </TABLE> </A> </DIV> <DIV class="menu"><A class="a" href="#">Меню 2<BR>  <TABLE> <TR><TD> <DIV> <A class="menu1" href="#">Пункт 1  <DIV class="a1"> <TABLE> <TR><TD><A href="#">Пункт 11</A></TD></TR> <TR><TD><A href="#">Пункт 12</A></TD></TR> <TR><TD><A href="#">Пункт 13</A></TD></TR> </TABLE> </DIV> </A></DIV> <DIV><A href="#">Пункт 2</A></DIV> <DIV><A href="#">Пункт 3</A></DIV> <DIV><A href="#">Пункт 4</A></DIV> <DIV><A href="#">Пункт 5</A></DIV> </TD></TR> </TABLE> </A> </DIV> <DIV class="menu"><A class="a" href="#">Меню 3<BR>  <TABLE> <TR><TD> <DIV><A href="#">Пункт 1</A></DIV> <DIV><A class="menu1" href="#">Пункт 2  <DIV class="a1"> <TABLE> <TR><TD><A class="menu2" href="#">Пункт 21  <DIV class="a2"> <TABLE> <TR><TD><A href="#">Пункт 211</A></TD></TR> <TR><TD><A href="#">Пункт 212</A></TD></TR> <TR><TD><A href="#">Пункт 213</A></TD></TR> </TABLE> </DIV></A></TD></TR> <TR><TD><A href="#">Пункт 22</A></TD></TR> <TR><TD><A href="#">Пункт 23</A></TD></TR> </TABLE> </DIV> </A></DIV> <DIV><A href="#">Пункт 3</A></DIV> <DIV><A href="#">Пункт 4</A></DIV> <DIV><A href="#">Пункт 5</A></DIV> </TD></TR> </TABLE> </A></div> <DIV class="menu"><A class="a" href="#">Меню 4<BR>  <TABLE> <TR><TD> <DIV> <A class="menu1" href="#">Пункт 1  <DIV class="a1"> <TABLE> <TR><TD><A href="#">Пункт 11</A></TD></TR> <TR><TD><A href="#">Пункт 12</A></TD></TR> <TR><TD><A href="#">Пункт 13</A></TD></TR> </TABLE> </DIV> </A></DIV> <DIV><A class="menu1" href="#">Пункт 2  <DIV class="a1"> <TABLE> <TR><TD><A class="menu2" href="#">Пункт 21  <DIV class="a2"> <TABLE> <TR><TD><A class="menu3" href="#">Пункт 211  <DIV class="a3"> <TABLE> <TR><TD><A href="#">Пункт 2111</A></TD></TR> <TR><TD><A href="#">Пункт 2112</A></TD></TR> <TR><TD><A href="#">Пункт 2113</A></TD></TR> </TABLE> </DIV> </A></TD></TR> <TR><TD><A href="#">Пункт 212</A></TD></TR> <TR><TD><A href="#">Пункт 213</A></TD></TR> </TABLE> </DIV></A></TD></TR> <TR><TD><A href="#">Пункт 22</A></TD></TR> <TR><TD><A href="#">Пункт 23</A></TD></TR> </TABLE> </DIV> </A></DIV> <DIV><A href="#">Пункт 3</A></DIV> <DIV><A href="#">Пункт 4</A></DIV> <DIV><A href="#">Пункт 5</A></DIV> </TD></TR> </TABLE> </A></DIV> <DIV class="menu"><A class="a" href="#">Меню 5</A></DIV> </DIV> </TD></TR></TABLE> </DIV> </body> </html>