iridescence,
I had the same problem so I used another menu. This works in both IE and NN.
Cheers,
Fengshui1998
<HTML>
<HEAD>
<style type="text/css">
a
{text-decoration: none;}
.title
{position: absolute;
width: 100px;
height: 20px;
left: 10px;
z-index: 10;
font-family: verdana, helvetica, sans-serif;
font-weight: bold;
font-size: 12px;}
.submenu
{position: absolute;
left: 25px;
width: 120px;
border: 1px solid black;
background-color: yellow;
layer-background-color: yellow;
font-family: verdana, helvetica, sans-serif;
font-size: 10px;
visibility: hidden;}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Fredrik Fridsten (fredrik.fridsten@home.se) -->
<!-- Web Site:
-->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!!
-->
<!-- Begin
// ADDITIONAL NOTES
// The input variables to the toggle function are the number of the submenu to open/close,
// starting with 0, and the number of pixels to move the objects below.
// For example toggle(1,60) opens/closes the second submenu and moves the objects below 60 pixels.
var nom = 4; // Number of menus
var usePictures = 1; // use pictures? 1 = yes, 0 = no
var ttls = new Array(); // An array for the title objects
var subs = new Array(); // An array for the submenu objects
var lastn;
var lastmove;
if (document.layers) {
visible = 'show';
hidden = 'hide';
}
else
if (document.all) {
visible = 'visible';
hidden = 'hidden';
}
for (var i = 1; i <= nom; i++) {
ttls
= ('title' + i);
subs = ('submenu' +i);
}
function picopen
{
title = ('title' + n);
pic = ('pic' + n);
if (document.layers) {
document.layers[title].document.images[pic].src = "}
else if (document.all) {
document.all(pic).src = " }
}
function picclose {
title = ('title' + n);
pic = ('pic' + n);
if (document.layers) {
document.layers[title].document.images[pic].src = "}
else if (document.all) {
document.all(pic).src = " }
}
lastn = (nom + 1);
lastmove = 0;
function lasttoggle(n,move) {
if (n <= nom) {
menu = ('submenu' + n);
if (document.layers) {
submenu = document.layers[menu];
}
else if (document.all) {
submenu = document.all(menu).style;
}
if (submenu.visibility == visible) {
submenu.visibility = hidden;
picclose; // Remove this if you don't use pictures
for (var i = (n+1); i <= nom; i++) {
if (document.layers) {
document.layers[ttls].top -= move;
document.layers[subs].top -= move;
}
else if (document.all) {
document.all(ttls).style.pixelTop -= move;
document.all(subs).style.pixelTop -= move;
}
}
}
}
}
function toggle(n,move) {
menu = ('submenu' + n);
if (document.layers) {
submenu = document.layers[menu];
}
else if (document.all) {
submenu = document.all(menu).style;
}
if (submenu.visibility == visible) {
submenu.visibility = hidden;
if (usePictures) picclose;
for (var i = (n+1); i <= nom; i++) {
if (document.layers) {
document.layers[ttls].top -= move;
document.layers[subs].top -= move;
}
else if (document.all) {
document.all(ttls).style.pixelTop -= move;
document.all(subs).style.pixelTop -= move;
}
}
}
else {
submenu.visibility = visible;
if (usePictures) picopen;
if (lastn != n) {
lasttoggle(lastn,lastmove);
}
for (var i = (n+1); i <= nom; i++) {
if (document.layers) {
document.layers[ttls].top += move;
document.layers[subs].top += move;
}
if (document.all) {
document.all(ttls).style.pixelTop += move;
document.all(subs).style.pixelTop += move;
}
}
}
lastn = n;
lastmove = move;
}
function tellDemo() {
alert('This link would open in the right frame, but this is just a demo!');
return false;
}
// End -->
</script>
</HEAD>
<BODY BGCOLOR=#ffffff vlink=#0000ff>
<div class="title" id="title1" style="top: 0px">
<a href="#" onclick="javascript: toggle(1,30); return false"><img name="pic1" src=" border="0">Category 1</a>
</div>
<div class="submenu" id="submenu1" style="top: 20px">
<a href="javascript:tellDemo();">Item # 1</a><br>
<a href="javascript:tellDemo();">Item # 2</a>
</div>
<div class="title" id="title2" style="top: 20px">
<a href="#" onclick="javascript: toggle(2,60); return false"><img name="pic2" src=" border="0">Category 2</a>
</div>
<div class="submenu" id="submenu2" style="top: 40px">
<a href="javascript:tellDemo();">Item # 3</a><br>
<a href="javascript:tellDemo();">Item # 4</a><br>
<a href="javascript:tellDemo();">Item # 5</a><br>
<a href="javascript:tellDemo();">Item # 6</a>
</div>
<div class="title" id="title3" style="top: 40px">
<a href="#" onclick="javascript: toggle(3,45); return false"><img name="pic3" src=" border="0">Category 3</a>
</div>
<div class="submenu" id="submenu3" style="top: 60px">
<a href="javascript:tellDemo();">Item # 7</a><br>
<a href="javascript:tellDemo();">Item # 8</a><br>
<a href="javascript:tellDemo();">Item # 9</a>
</div>
<div class="title" id="title4" style="top: 60px">
<a href="#" onclick="javascript: toggle(4,60); return false"><img name="pic4" src=" border="0">Category 4</a>
</div>
<div class="submenu" id="submenu4" style="top: 80px">
<a href="javascript:tellDemo();">Item # 10</a><br>
<a href="javascript:tellDemo();">Item # 11</a><br>
<a href="javascript:tellDemo();">Item # 12</a><br>
<a href="javascript:tellDemo();">Item # 13</a>
</div>
<br><br><br><br><br><br><br><br><br>
<center>
<font face="arial, helvetica" size="-1"><a href="category-menus-faq.html" target="_new">Need help?<br>Read the FAQs</a></font>
</center>
</body>
</html>
)