How can i have the following drop down menu drop onto the bottom frame (assuming it is in the top frame) and also still be able to close properly once mouse is off:
<html >
<head>
<style type="text/css">
a { font-size:10pt; color: navy; text-decoration: none }
a:hover { color:blue; text-decoration: underline }
a.plain:hover { font-size:10pt;font-weight:bold; color: blue; text-decoration: none }
#box {
position:absolute;
visibility:hidden;
layer-background-color:silver }
#limebox {background-color:lime }
#bluebox {background-color:lightsteelblue }
hover{color: white
#mnubar {font:10pt arial; font-weight:bold; color:"steelblue" }
</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=25;
var items = 4 ;
for (i=1; i<=items; i++) {
elopen=document.layers
if (i != (x + 1)) {
elopen.visibility = "hide" }
}
}
if(ie) {
curEl = event.toElement
curEl.style.background = "lightsteelblue"
showBox = document.all.box[x];
showBox.style.visibility = "visible";
showBox.style.top = 25;
var items = 4
for (i=0; i<items; i++) {
elOpen=document.all.box
barEl=document.all.mnubar
if (i != x){
elOpen.style.visibility = "hidden"
barEl.style.background = "black"
}
}
}
}
function closeIt() {
var items = 4
for (i=0; i<items; i++) {
if(ie){
document.all.box.style.visibility = "hidden"
barEl=document.all.mnubar
barEl.style.background = "black"
}
if(ns){ document.layers[i+1].visibility = "hide"}
}
}
</script>
</head>
<body bgcolor="white" vlink=navy marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" style='direction:rtl;'>
<table border="0" cellpadding="0" width="100%" bgcolor="black" height="18" id=mainmenu>
<tr>
<td align="center" ><a href=' onmouseover="closeIt()" class=plain>My Home Page</a></td>
<td align="center" nowrap >
<a href="#" onmouseover="openIt(0)" id=mnubar>ùìåí</a><br></td>
<td align="center" nowrap >
<a href="#" onmouseover="openIt(1)" id=mnubar>Menu Item 2</a><br></td>
<td align="center" nowrap >
<a href="#" onmouseover="openIt(2)" id=mnubar>Menu Item 3</a><br></td>
<td align="center" nowrap >
<a href="#" onmouseover="openIt(3)" id=mnubar>Menu Item 4</a><br></td>
<td align="center" width="30" nowrap valign="top"> </td>
</tr>
</table>
<br><br>
<div onmouseover="closeIt()" >
<layer onmouseover="closeIt()">
<p style='color:white;'><b>Hidden close script</b></p>
<p style='color:white;'>A horizontal menu bar that displays a second horizontal menu on mouseover </p>
<p style='color:white;'>A horizontal menu bar that displays a second horizontal menu on mouseover </p>
<p style='color:white;'>kjllllllllllllllllllllllllllllllllllllllllllllllllllllll</p>
<p style='color:white;'>kjllllllllllllllllllllllllllllllllllllllllllllllllllllll</p>
</layer>
</div>
<!-- Menu Bar Item 1 -->
<div id=box style=right:200>
<table border="1" height="1%" id=bluebox >
<tr><td height="80%"><a href='../scripts.htm' >Go To Scripts Page</a></td></tr>
<tr><td><a href=' To My Home Page</a></td></tr>
</table>
</div>
<!-- Menu Bar Item 2 -->
<div id=box style=right:400>
<table width=10%" border="1" id=bluebox >
<tr><td><a href='../scripts.htm' >Go To Scripts Page</a></td></tr>
<tr><td><a href=' To My Home Page</a></td></tr>
</table>
</div>
<!-- Menu Bar Item 3 -->
<div id=box style=right:600>
<table border="1" id=bluebox >
<tr><td><a href='../scripts.htm' >Go To Scripts Page</a></td></tr>
<tr><td><a href=' To My Home Page</a></td></tr>
</table>
</div>
<!-- Menu Bar Item 4 -->
<div id=box style=right:800>
<table border="1" id=bluebox >
<tr><td><a href='../scripts.htm' >Go To Scripts Page</a></td></tr>
<tr><td><a href=' To My Home Page</a></td></tr>
</table>
</div>
</body>
</html>
<html >
<head>
<style type="text/css">
a { font-size:10pt; color: navy; text-decoration: none }
a:hover { color:blue; text-decoration: underline }
a.plain:hover { font-size:10pt;font-weight:bold; color: blue; text-decoration: none }
#box {
position:absolute;
visibility:hidden;
layer-background-color:silver }
#limebox {background-color:lime }
#bluebox {background-color:lightsteelblue }
hover{color: white
#mnubar {font:10pt arial; font-weight:bold; color:"steelblue" }
</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=25;
var items = 4 ;
for (i=1; i<=items; i++) {
elopen=document.layers
if (i != (x + 1)) {
elopen.visibility = "hide" }
}
}
if(ie) {
curEl = event.toElement
curEl.style.background = "lightsteelblue"
showBox = document.all.box[x];
showBox.style.visibility = "visible";
showBox.style.top = 25;
var items = 4
for (i=0; i<items; i++) {
elOpen=document.all.box
barEl=document.all.mnubar
if (i != x){
elOpen.style.visibility = "hidden"
barEl.style.background = "black"
}
}
}
}
function closeIt() {
var items = 4
for (i=0; i<items; i++) {
if(ie){
document.all.box.style.visibility = "hidden"
barEl=document.all.mnubar
barEl.style.background = "black"
}
if(ns){ document.layers[i+1].visibility = "hide"}
}
}
</script>
</head>
<body bgcolor="white" vlink=navy marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" style='direction:rtl;'>
<table border="0" cellpadding="0" width="100%" bgcolor="black" height="18" id=mainmenu>
<tr>
<td align="center" ><a href=' onmouseover="closeIt()" class=plain>My Home Page</a></td>
<td align="center" nowrap >
<a href="#" onmouseover="openIt(0)" id=mnubar>ùìåí</a><br></td>
<td align="center" nowrap >
<a href="#" onmouseover="openIt(1)" id=mnubar>Menu Item 2</a><br></td>
<td align="center" nowrap >
<a href="#" onmouseover="openIt(2)" id=mnubar>Menu Item 3</a><br></td>
<td align="center" nowrap >
<a href="#" onmouseover="openIt(3)" id=mnubar>Menu Item 4</a><br></td>
<td align="center" width="30" nowrap valign="top"> </td>
</tr>
</table>
<br><br>
<div onmouseover="closeIt()" >
<layer onmouseover="closeIt()">
<p style='color:white;'><b>Hidden close script</b></p>
<p style='color:white;'>A horizontal menu bar that displays a second horizontal menu on mouseover </p>
<p style='color:white;'>A horizontal menu bar that displays a second horizontal menu on mouseover </p>
<p style='color:white;'>kjllllllllllllllllllllllllllllllllllllllllllllllllllllll</p>
<p style='color:white;'>kjllllllllllllllllllllllllllllllllllllllllllllllllllllll</p>
</layer>
</div>
<!-- Menu Bar Item 1 -->
<div id=box style=right:200>
<table border="1" height="1%" id=bluebox >
<tr><td height="80%"><a href='../scripts.htm' >Go To Scripts Page</a></td></tr>
<tr><td><a href=' To My Home Page</a></td></tr>
</table>
</div>
<!-- Menu Bar Item 2 -->
<div id=box style=right:400>
<table width=10%" border="1" id=bluebox >
<tr><td><a href='../scripts.htm' >Go To Scripts Page</a></td></tr>
<tr><td><a href=' To My Home Page</a></td></tr>
</table>
</div>
<!-- Menu Bar Item 3 -->
<div id=box style=right:600>
<table border="1" id=bluebox >
<tr><td><a href='../scripts.htm' >Go To Scripts Page</a></td></tr>
<tr><td><a href=' To My Home Page</a></td></tr>
</table>
</div>
<!-- Menu Bar Item 4 -->
<div id=box style=right:800>
<table border="1" id=bluebox >
<tr><td><a href='../scripts.htm' >Go To Scripts Page</a></td></tr>
<tr><td><a href=' To My Home Page</a></td></tr>
</table>
</div>
</body>
</html>