MJFan
07-14-2009, 09:12 AM
My Dropdown menu is hidden in Internet Explorer. I have read that I need to add z-index but am unsure where it should go. Can anyone advice on this please?
I have attached both menu scripts.
I am new to this and muddling my way through, so any help would be great.
<!-- Begin CSS Vertical Menu - menu ver 3.0 2007
// NOTE: If you use a ' add a slash before it like this \'
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: 145px;"><a href="index.html">Shop by Lifestyle</a>');
document.write(' <ul>');
document.write(' <li><a href="Camping.html">Camping and Exploring</a></li>');
document.write(' <li><a href="Boating.html">Boating</a></li>');
document.write(' <li><a href="Cabin.html">Cabins and Cottages</a></li>');
document.write(' <li><a href="RVLiving.html">RV Living</a></li>');
document.write(' <li><a href="AtHome.html">Solar at Home</a></li>');
document.write(' </ul>');
document.write(' </li>');
document.write(' <li style="width: 145px;"><a href="product.htm">Shop by Product</a>');
document.write(' <ul>');
document.write(' <li><a href="SolarPanels.htm">Solar Panels</a></li>');
document.write(' <li><a href="SolarLighting.html">Solar Lighting</a></li>');
document.write(' <li><a href="SolarVents.htm">Solar Vents</a></li>');
document.write(' <li><a href="SolarAccessories.htm">Solar Accessories</a></li>');
document.write(' <li><a href="SolarMonitoring.html">Solar Monitoring</a></li>');
document.write(' </ul>');
document.write(' </li>');
document.write(' <li style="width: 145px;"><a href="DiscountShop.htm">Discount Shop</a>');
document.write(' </li>');
document.write(' <li style="width: 145px;"><a href="index.html">Support</a>');
document.write(' <ul>');
document.write(' <li><a href="Solar Learning.htm">Getting Started</a></li>');
document.write(' <li><a href="Warranty.htm">Warranty Information</a></li>');
document.write(' <li><a href="FAQs.htm">FAQs</a></li>');
document.write(' <li><a href="Manuals.htm">Product Manuals</a></li>');
document.write(' </ul>');
document.write(' </li>');
document.write(' <li style="width: 145px;"><a href="CustServ.htm">Customer Service</a>');
document.write(' <ul>');
document.write(' <li><a href="About.htm">About Us</a></li>');
document.write(' <li><a href="Contact.htm">Contact Us</a></li>');
document.write(' <li><a href="Shipping.htm">Shipping Information</a></li>');
document.write(' </ul>');
document.write(' </li>');
document.write(' <li style="width: 30px;"><a title="English" href="index.html"><img border="1" src="images/flags/english.gif" width="19" height="13"></a>');
document.write(' </li>');
document.write(' <li style="width: 30px;"><a title="Deutsch" href="Comingsoon.html"><img border="1" src="images/flags/german.gif" width="19" height="13"></a>');
document.write(' </li>');
document.write(' <li style="width: 30px;"><a title="Français" href="Comingsoon.html"><img border="1" src="images/flags/french.gif" width="19" height="13"></a>');
document.write(' </li>');
document.write(' <li style="width: 30px;"><a title="Italiano" href="Comingsoon.html"><img border="1" src="images/flags/italian.gif" width="19" height="13"></a>');
document.write(' </li>');
document.write(' <li style="width: 30px;"><a title="Español" href="Comingsoon.html"><img border="1" src="images/flags/spanish.gif" width="19" height="13"></a>');
document.write(' </li>');
document.write(' <li style="width: 100px;"><a title="View Cart" href="Comingsoon.html">View Cart</a>');
document.write(' </li>');
// END LINKS //
document.write('</ul>');
document.write('</td></tr></table>');
// END -->
/* START THE CODE FOR THE MENUS */
/* IF YOU EDIT THE SUB MENU WIDTH - EDIT 160 IN 4 PLACES TOTAL */
/* menu ver 3.0 2007 */
/* MENU OUTER TABLE - BACKGROUND & TOP & BOTTOM MENU BORDERS */
.menutable {
background-image: url('../picts/gray/menu.gif');
background-color: #A4A6AC;
white-space: nowrap;
width:100%;
border-top: 1px solid #888888;
border-bottom: 1px solid #888888;
padding: 0px;
margin: 0px
}
/* CODE FOR MENU 2ND OUTER TABLE */
#menunav, #menunav ul {
float: left;
white-space: nowrap;
width: 100%;
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: #FFFFFF;
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 {
border-left:0px solid #888888; border-right:1px solid #888888; border-top:0px solid #888888; border-bottom:0px solid #888888; background-image: url('../picts/gray/menu.gif');
background-color: #A4A6AC;
/* 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('../picts/gray/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: #B8B9BD;
border: solid #888888;
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: #666666;
font-weight: normal;
text-decoration: none;
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: 160px;
border: solid #000000;
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: 160px;
}
/* SUB MENU LINK WIDTH */
#menunav li ul a {
width: 160px;
}
/* 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') no-repeat center right;
}
I have attached both menu scripts.
I am new to this and muddling my way through, so any help would be great.
<!-- Begin CSS Vertical Menu - menu ver 3.0 2007
// NOTE: If you use a ' add a slash before it like this \'
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: 145px;"><a href="index.html">Shop by Lifestyle</a>');
document.write(' <ul>');
document.write(' <li><a href="Camping.html">Camping and Exploring</a></li>');
document.write(' <li><a href="Boating.html">Boating</a></li>');
document.write(' <li><a href="Cabin.html">Cabins and Cottages</a></li>');
document.write(' <li><a href="RVLiving.html">RV Living</a></li>');
document.write(' <li><a href="AtHome.html">Solar at Home</a></li>');
document.write(' </ul>');
document.write(' </li>');
document.write(' <li style="width: 145px;"><a href="product.htm">Shop by Product</a>');
document.write(' <ul>');
document.write(' <li><a href="SolarPanels.htm">Solar Panels</a></li>');
document.write(' <li><a href="SolarLighting.html">Solar Lighting</a></li>');
document.write(' <li><a href="SolarVents.htm">Solar Vents</a></li>');
document.write(' <li><a href="SolarAccessories.htm">Solar Accessories</a></li>');
document.write(' <li><a href="SolarMonitoring.html">Solar Monitoring</a></li>');
document.write(' </ul>');
document.write(' </li>');
document.write(' <li style="width: 145px;"><a href="DiscountShop.htm">Discount Shop</a>');
document.write(' </li>');
document.write(' <li style="width: 145px;"><a href="index.html">Support</a>');
document.write(' <ul>');
document.write(' <li><a href="Solar Learning.htm">Getting Started</a></li>');
document.write(' <li><a href="Warranty.htm">Warranty Information</a></li>');
document.write(' <li><a href="FAQs.htm">FAQs</a></li>');
document.write(' <li><a href="Manuals.htm">Product Manuals</a></li>');
document.write(' </ul>');
document.write(' </li>');
document.write(' <li style="width: 145px;"><a href="CustServ.htm">Customer Service</a>');
document.write(' <ul>');
document.write(' <li><a href="About.htm">About Us</a></li>');
document.write(' <li><a href="Contact.htm">Contact Us</a></li>');
document.write(' <li><a href="Shipping.htm">Shipping Information</a></li>');
document.write(' </ul>');
document.write(' </li>');
document.write(' <li style="width: 30px;"><a title="English" href="index.html"><img border="1" src="images/flags/english.gif" width="19" height="13"></a>');
document.write(' </li>');
document.write(' <li style="width: 30px;"><a title="Deutsch" href="Comingsoon.html"><img border="1" src="images/flags/german.gif" width="19" height="13"></a>');
document.write(' </li>');
document.write(' <li style="width: 30px;"><a title="Français" href="Comingsoon.html"><img border="1" src="images/flags/french.gif" width="19" height="13"></a>');
document.write(' </li>');
document.write(' <li style="width: 30px;"><a title="Italiano" href="Comingsoon.html"><img border="1" src="images/flags/italian.gif" width="19" height="13"></a>');
document.write(' </li>');
document.write(' <li style="width: 30px;"><a title="Español" href="Comingsoon.html"><img border="1" src="images/flags/spanish.gif" width="19" height="13"></a>');
document.write(' </li>');
document.write(' <li style="width: 100px;"><a title="View Cart" href="Comingsoon.html">View Cart</a>');
document.write(' </li>');
// END LINKS //
document.write('</ul>');
document.write('</td></tr></table>');
// END -->
/* START THE CODE FOR THE MENUS */
/* IF YOU EDIT THE SUB MENU WIDTH - EDIT 160 IN 4 PLACES TOTAL */
/* menu ver 3.0 2007 */
/* MENU OUTER TABLE - BACKGROUND & TOP & BOTTOM MENU BORDERS */
.menutable {
background-image: url('../picts/gray/menu.gif');
background-color: #A4A6AC;
white-space: nowrap;
width:100%;
border-top: 1px solid #888888;
border-bottom: 1px solid #888888;
padding: 0px;
margin: 0px
}
/* CODE FOR MENU 2ND OUTER TABLE */
#menunav, #menunav ul {
float: left;
white-space: nowrap;
width: 100%;
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: #FFFFFF;
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 {
border-left:0px solid #888888; border-right:1px solid #888888; border-top:0px solid #888888; border-bottom:0px solid #888888; background-image: url('../picts/gray/menu.gif');
background-color: #A4A6AC;
/* 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('../picts/gray/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: #B8B9BD;
border: solid #888888;
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: #666666;
font-weight: normal;
text-decoration: none;
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: 160px;
border: solid #000000;
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: 160px;
}
/* SUB MENU LINK WIDTH */
#menunav li ul a {
width: 160px;
}
/* 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') no-repeat center right;
}