CSS Help.

Firefox / I.E.

[sggmps]

CSS/Java menu code, works fine in IE, but it firefox it doesnt anymore. Seems when you rollover any of the links in firefox the (submenu) pops all the time instead of just in the one link.

LINK
LINK
LINK > SUBLINK1
SUBLINK2
LINK
LINK

its actually driving me crazy.

******** CSS ********

.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 131px; /*WIDTH OF MAIN MENU ITEMS*/

}

.glossymenu li{
position: relative;
}

.glossymenu li ul{ /*SUB MENU STYLE*/

width: 131px; /*WIDTH OF SUB MENU ITEMS*/
margin-left: 1px;
top: 0;
display: none;

.position: absolute;
.width: 131px; /*WIDTH OF SUB MENU ITEMS*/
.margin-left: 1px;
.top: 0;
.display: none;
.filter:alpha(opacity=100);
.-moz-opacity:1;

}

.glossymenu li a {
display: block;
width: auto;
}

.glossymenu #nav1 a{ background-image: url(images/navWhy.gif); width: 131px; height:21px;}
.glossymenu #nav2 a{ background-image: url(images/navAbout.gif); width: 131px; height:21px;}
.glossymenu #nav3 a{ background-image: url(images/navJoinUs.gif); width: 131px; height:21px;}
.glossymenu #nav4 a{ background-image: url(images/navSponsorPackages.gif); width: 131px; height:21px;}
.glossymenu #nav5 a{ background-image: url(images/navWhatsNew.gif); width: 131px; height:22px; }
.glossymenu #nav6 a{ background-image: url(images/navCalendar.gif); width: 131px; height:20px; }
.glossymenu #nav7 a{ background-image: url(images/navMembers.gif); width: 131px; height:21px; }
.glossymenu #nav8 a{ background-image: url(images/navNetwork.gif); width: 131px; height:22px;}
.glossymenu #nav9 a{ background-image: url(images/navAreaChambers.gif); width: 131px; height:20px;}
.glossymenu #nav10 a{ background-image: url(images/navPartners.gif); width: 131px; height:21px;}
.glossymenu #nav11 a{ background-image: url(images/navPhotoGallery.gif); width: 131px; height:21px;}
.glossymenu #nav12 a{ background-image: url(images/navTellAFriend.gif); width: 131px; height:20px;}
.glossymenu #nav13 a{ background-image: url(images/navVisitUs.gif); width: 131px; height:22px;}
.glossymenu #nav14 a{ background-image: url(images/navContactUs.gif); width: 131px; height:23px;}

.glossymenu #nav1 a:hover{ background-image: url(images/navWhy-over.gif); width: 131px; }
.glossymenu #nav2 a:hover{ background-image: url(images/navAbout-over.gif); width: 131px; }
.glossymenu #nav3 a:hover{ background-image: url(images/navJoinUs-over.gif); width: 131px; }
.glossymenu #nav4 a:hover{ background-image: url(images/navSponsorPackages-over.gif); width: 131px; }
.glossymenu #nav5 a:hover{ background-image: url(images/navWhatsNew-over.gif); width: 131px; }
.glossymenu #nav6 a:hover{ background-image: url(images/navCalendar-over.gif); width: 131px; }
.glossymenu #nav7 a:hover{ background-image: url(images/navMembers-over.gif); width: 131px; }
.glossymenu #nav8 a:hover{ background-image: url(images/navNetwork-over.gif); width: 131px; }
.glossymenu #nav9 a:hover{ background-image: url(images/navAreaChambers-over.gif); width: 131px; }
.glossymenu #nav10 a:hover{ background-image: url(images/navPartners-over.gif); width: 131px; }
.glossymenu #nav11 a:hover{ background-image: url(images/navPhotoGallery-over.gif); width: 131px; }
.glossymenu #nav12 a:hover{ background-image: url(images/navTellAFriend-over.gif); width: 131px; }
.glossymenu #nav13 a:hover{ background-image: url(images/navVisitUs-over.gif); width: 131px; }
.glossymenu #nav14 a:hover{ background-image: url(images/navContactUs-over.gif); width: 131px; }

.glossymenu #subnav1 a{ background-image: url(images/navLongwoodChamber.gif); width: 131px; height:20px;}
.glossymenu #subnav2 a{ background-image: url(images/navAltaSpringsChamber.gif); width: 131px; height:20px;}
.glossymenu #subnav1 a:hover{ background-image: url(images/navLongwoodChamber-over.gif); width: 131px; }
.glossymenu #subnav2 a:hover{ background-image: url(images/navAltaSpringsChamber-over.gif); width: 131px; }

****** HTML ******

<ul id="verticalmenu" class="glossymenu">
<li id="nav1"><a href="/WhySeminoleCounty/" /></a></li>
<li id="nav2"><a href="/AboutOurChamber/" /></a></li>
<li id="nav3"><a href="/JoinTheChamber/" /></a></li>
<li id="nav4"><a href="/SponsorshipPackages/" /></a></li>
<li id="nav5"><a href="/WhatsNew/" /></a></li>
<li id="nav6"><a href="/EventCalendar/" /></a></li>
<li id="nav7"><a href="/OurMembers/" /></a></li>
<li id="nav8"><a href="/MemberNetwork/" /></a></li>
<li id="nav9"><a href="#"></a></li>
<ul>
<li id="subnav1"><a href="#"></a></li>
<li id="subnav2"><a href="#"></a></li>
<li><img src="/images/navBottom.gif" width="131" height="4" style="position:absolute;"/></li>
</ul>

<li id="nav10" style=".margin-top:-4px;"><a href="/ChamberPartners/" /></a></li>
<li id="nav11"><a href="/PhotoGallery/" /></a></li>
<li id="nav12"><a href="/TellAFriend/" /></a></li>
<li id="nav13"><a href="/VisitUs/" /></a></li>
<li id="nav14"><a href="/ContactUs/" /></a></li>
<li><img src="/images/navBottom.gif" width="131" height="4" style="position:absolute;padding-bottom:15px;" /></li>
</ul>

******* SCIPT ******
var menuids=new Array("verticalmenu") //Enter id(s) of UL menus, separated by commas
var submenuoffset=-2 //Offset of submenus from main menu. Default is -2 pixels.

function createcssmenu(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
var spanref=document.createElement("span")

spanref.innerHTML=""
ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref)
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.left=this.parentNode.offsetWidth+submenuoffset+"px"
this.getElementsByTagName("ul")[0].style.display="block"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.display="none"
}
}
}
}

if (window.addEventListener)
window.addEventListener("load", createcssmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", createcssmenu)

[encyclo]

Welcome to WebmasterWorld sggmps! The first issue I see with the code you have specified is that you have added a trailing slash within your anchors:

<li id="nav1"><a href="/WhySeminoleCounty/" 

/

></a></li>

This is an error - you are closing the anchor with the

</a>

so the slash has no place there. Also, did you remove the anchor text for the purposes of this example, or are they really empty list items?

Could you specify what doctype you are using on your page?