Hello,
Appreciate any help on this problem. I have coded a drop down menu that works great in FF, but in IE it won't close when you have moved off of the drop down table. Please review and let me know any ideas. Thank you! There are 4 parts of code relevant to the drop down menu and here they are:
1. The index.html piece (just the top 30 or so lines are shown from index.html:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>The Stuff Safari</title>
<meta name="description" content="Civil War Collectibles and memorabilia"/>
<meta name="keywords" content="Collectibles, memorabilia"/>
<link rel="StyleSheet" href="css/common-style.css" type="text/css">
<link rel="StyleSheet" href="css/gold-menu.css" type="text/css">
<script language="JavaScript" type="text/javascript" src="css/css.js"></script>
<script language="JavaScript" type="text/javascript" src="javascripts.js"></script>
</head>
<body>
<div id="header">
<div id="logo">
<h1><a href="#"><b>theStuffSafari</b>...</a></h1>
</div>
<div id="top">
<h1>...time to hunt down your treasure</h1>
</div>
</div>
<script language="JavaScript" type="text/javascript" src="menu.js"></script>2. menu.js
<!-- Begin
document.write('<table cellpadding="0" cellspacing="0" border="0" class="menutable"><tr><td class="printhide">');
document.write('<ul id="menunav">');
// START MENU LINKS - EDIT BELOW THIS AREA
document.write('<li style="width: 124px;"><a href="index.html">Home</a></li>');
document.write(' <li style="width: 125px;"><a href="sports.htm">Sports Stuff</a>');
document.write(' <ul>');
document.write(' <li><a href="sports.htm">Sports Stuff</a></li>');
document.write(' <li><a href="sports.htm">Collectibles</a></li>');
document.write(' <li><a href="sports.htm">Memorabilia</a></li>');
document.write(' <li><a href="sports.htm">Sports Stuff articles</a></li>');
document.write(' </ul>');
document.write(' </li>');
document.write(' <li style="width: 130px;"><a href="newsandlinks.htm">News & Links Stuff</a>');
document.write(' <ul>');
document.write(' <li><a href="newsandlinks.htm">Company News</a></li>');
document.write(' <li><a href="newsandlinks.htm">Links</a></li>');
document.write(' </ul>');
document.write(' </li>');
// END LINKS //
document.write('</ul>');
document.write('</td></tr></table>');
// END -->3. gold-menu.css
/* START THE CODE FOR THE MENUS */
/* MENU OUTER TABLE - BACKGROUND & TOP & BOTTOM MENU BORDERS */
.menutable {
clear: both;
float: none;
background-image: url("../images/menu.gif");
background-color: #C0C1B4;
white-space: nowrap;
width:760;
height: 30px;
border-top: #47473B 0px solid;
border-bottom: #47473B 1px solid;
padding: 0px;
margin: 0px auto;
}
/* CODE FOR MENU 2ND OUTER TABLE */
#menunav, #menunav ul {
float: left;
white-space: nowrap;
width: 760;
list-style: none;
padding: 0px;
border: solid #FFFFFF;
border-width: 0px 0px 0px 0px;
/* NOTE: BORDERs ABOVE ARE | top | right | bottom | left */
margin: 0px 0px 0px 0px;
}
/* TOP LEVEL MARGINS, FONT FACE & FONT COLORS & PADDING */
#menunav a {
color: #666666;
font: 12px arial, sans-serif;
font-weight: bold;
text-decoration: none;
text-align: center;
padding: 3px 5px 4px 5px;
width: auto;
display: block;
cursor: pointer;
}
/* TOP LEVEL BACKROUND COLOR AND BORDERS - EDIT MENU IMAGES ALSO */
#menunav li {
background-image: url("../images/menu.gif");
background-color: #C0C1B4;
border: solid #9E9E88;
border-width: 0px 1px 0px 0px; /* THIS IS A RIGHT BORDER */
/* NOTE: BORDERs ABOVE ARE | top | right | bottom | left */
float: left;
padding: 0;
}
/* TOP LEVEL HOVER FONT COLOR */
#menunav li a:hover {
background-image: url("../images/menuon.gif");
color: #000000;
text-decoration: none;
cursor: pointer;
}
/* TOP LEVEL HOVER BACKGROUND COLOR AND BORDERS - EDIT MENU IMAGES ALSO */
#menunav li:hover, #menunav li.IEMhover
{
background-color: #D0D0C5;
border: solid #9E9E88;
border-width: 0px 1px 0px 0px; /* THIS IS A RIGHT BORDER */
/* NOTE: BORDERs ABOVE ARE | top | right | bottom | left */
}
/* SUB LEVEL FONT & FONT COLOR & PADDING */
#menunav li ul a {
font: 11px verdana, arial, sans-serif;
color: #47473B;
font-weight: normal;
text-decoration: underline;
text-align: left;
padding: 4px 0px 4px 0px;
text-indent: 8px;
cursor: pointer;
}
/* SUB LEVEL FONT HOVER COLOR */
#menunav li ul a:hover {
background-image: none;
color: #000000;
text-decoration: none;
cursor: pointer;
}
/* SUB LEVEL OUTER BORDER */
#menunav li ul {
position: absolute;
left: -999em;
height: auto;
width: 165px;
border: solid #47473B;
border-width: 1px 1px 1px 1px;
/* NOTE: BORDERs ABOVE ARE | top | right | bottom | left */
margin: 0;
}
/* SUB LEVEL BACKGROUND COLOR & BORDER OPTION FOR EACH LINK */
#menunav li ul li {
background-image: none;
background-color: #FFFFFF;
border: solid #C0C0C0;
border-width: 1px 0px 0px 0px;
/* NOTE: BORDERs ABOVE ARE | top | right | bottom | left */
}
/* SUB LEVEL HOVER BACKGROUND AND BORDERS */
#menunav li ul li:hover, #menunav li ul li.IEMhover
{
background-image: none;
background-color: #F0F0F0;
border: solid #C0C0C0;
border-width: 1px 0px 0px 0px;
/* NOTE: BORDERs ABOVE ARE | top | right | bottom | left */
}
/* SUB MENU WIDTH - ALSO EDIT TWO BELOW AND ONE ABOVE TO MATCH */
#menunav li li {
padding-right: 0px;
width: 165px;
}
/* SUB MENU LINK WIDTH */
#menunav li ul a {
width: 165px;
}
/* FOR 3rd LEVEL MENU LOCATION */
#menunav li ul ul {
margin: -21px 0px 0px 160px;
}
#menunav li:hover ul ul, #menunav li:hover ul ul ul, #menunav li.IEMhover ul ul, #menunav li.IEMhover ul ul ul
{ left: -999em; }
#menunav li:hover ul, #menunav li li:hover ul, #menunav li li li:hover ul, #menunav li.IEMhover ul, #menunav li li.IEMhover ul, #menunav li li li.IEMhover ul
{ left: auto; }
/* FOR 3rd LEVEL ARROW */
#menunav a.parent {
background: url(../picts/menu-arrow.gif) center right no-repeat;
}<!-- Begin
function blockError(){return true;}
window.onerror = blockError;
// -->