< html>
< head>
< meta http-equiv="content-type" content="text/html; charset=windows-1251">
< title>Горизонтальное меню раскрывающееся при наведении мыши.< /title>
< style type="text/css">
a { font-size:10pt; color: navy; text-decoration: none }
a:hover { background-color: yellow; text-decoration: underline }
#box {
position:absolute;
visibility:hidden;
layer-background-color:silver }
#limebox {background-color:lime }
#bluebox {background-color:lightsteelblue }
#mnubar {font:10pt arial; font-weight:bold }

< /style>

< script language="javascript">
ns=window.navigator.appname == "netscape"
ie=window.navigator.appname == "microsoft internet explorer"

function openit(x) {
if(ns) {
showbox= document.layers[x+1]
showbox.visibility = "show"
showbox.top=44
var items = 5
for (i=1; i< =items; i++) {
elopen=document.layers[i]
if (i != (x + 1)) {
elopen.visibility = "hide" }
}
}

if(ie) {
curel = event.toelement
curel.style.background = "yellow"

showbox = document.all.box[x];
showbox.style.visibility = "visible";
showbox.style.top = 46;

var items = 5
for (i=0; i< items; i++) {
elopen=document.all.box[i]
barel=document.all.mnubar[i]
if (i != x){
elopen.style.visibility = "hidden"
barel.style.background = "#ccccff"
}
}
}
}

function closeit() {
var items = 5
for (i=0; i< items; i++) {
if(ie){
document.all.box[i].style.visibility = "hidden"
barel=document.all.mnubar[i]
barel.style.background = "#ccccff"
}
if(ns){ document.layers[i+1].visibility = "hide"}
}
}

< /script>

< /head>

< body bgcolor="white" vlink=navy marginwidth="0" marginheight="0" topmargin="0" leftmargin="0">

< table border="0" cellpadding="0" width="100%" bgcolor="#ccccff" height="20" id=mainmenu>

< tr>
< td align="center" nowrap valign="middle" colspan="7" bgcolor="#000066" >
< p align="left">< b>< font size="4" face="arial" color="#ffff00">Раскрывающеяся
меню< /font>< /b>< /td>

< /tr>

< tr>
< td align="center" >< b>< font color="#000080" face="arial">< a
href="http://superbest.com">Главная< /a>< /font>< /b>< br>
< /td>

< td align="center" nowrap >
< a href="#" onmouseover="openit(0)" id=mnubar>Меню 1< /a> < img src="arrowdn.gif"
width="10" height="10" >< br>< /td>

< td align="center" nowrap >
< a href="#" onmouseover="openit(1)" id=mnubar>Меню 2< /a> < img src="arrowdn.gif"
width="10" height="10" >< br>< /td>

< td align="center" nowrap >
< a href="#" onmouseover="openit(2)" id=mnubar>Меню 3< /a> < img src="arrowdn.gif"
width="10" height="10" >< br>< /td>

< td align="center" nowrap >
< a href="#" onmouseover="openit(3)" id=mnubar>Меню 4< /a> < img src="arrowdn.gif"
width="10" height="10" >< br>< /td>

< td align="center" nowrap >
< a href="#" onmouseover="openit(4)" id=mnubar>Меню 5< /a> < img src="arrowdn.gif"
width="10" height="10" >< br>< /td>

< td align="center" width="30" nowrap valign="top"> < /td>
< /tr>
< /table>
< br>< br>

< div onmouseover="closeit()" >
< layer onmouseover="closeit()">

< /layer>
< /div>

<!-- Меню 1 -->

< div id=box style=left:120>
< table border="1" id=bluebox >
< tr>< td>< a href='link.htm' >Ссылка 1< /a>< /td>
< td>< a href='link.htm'>Ссылка 2< /a>< /td>< /tr>
< /table>
< /div>

<!-- Меню 2 -->

< div id=box style=left:200>
< table border="1" id=limebox> < tr>
< td>< a href='link.htm'>Ссылка 3< /a>< /td>
< td>< a href='link.htm' >Ссылка 4< /a>< /td>
< td>< a href='link.htm' >Ссылка 5< /a>< /td>< /tr>
< /table>
< /div>

<!-- Меню 3 -->

< div id=box style=left:240>
< table border="1" id=bluebox>
< tr>< td>< a href='link.htm' >Ссылка 6< /a>< /td>
< td>< a href='link.htm' >Ссылка 7< /a>< /td>
< td>< a href='link.htm' >Ссылка 8< /a>< /td>
< td>< a href='link.htm' >Ссылка 9< /a>< /td>
< td>< a href='link.htm' >Ссылка 10< /a>< /td>< /tr>
< /table>
< /div>

<!-- Меню 4 -->

< div id=box style=left:400>
< table border="1" id=limebox>
< tr>< td>< a href='link.htm' >Ссылка 11< /a>< /td>
< td>< a href='link.htm' >Ссылка 12< /a>< /td>
< td>< a href='link.htm' >Ссылка 13< /a>< /td>
< td>< a href='link.htm' >Ссылка 14< /a>< /td>< /tr>
< /table>
< /div>

<!-- Меню 5 -->

< div id=box style=left:520>
< table border="1" id=bluebox>
< tr>< td>< a href='link.htm' >Ссылка 15< /a>< /td>
< td>< a href='link.htm' >Ссылка 16< /a>< /td>
< td>< a href='link.htm' >Ссылка 17< /a>< /td>< /tr>
< /table>
< /div>

< /body>
< /html>