Firefox drop down menu: first li link not recognised

Has anyone seen this before?

[LouLou]

Hi,

I have a drop down menu built from CSS and ul/li's.

It seems to work wonderfully except the very first level or first LI does not show as a link in firefox.

It works in ie fine but not in firefox/mozilla. The sub menus reveal themselves but the first link can not be recognised.

Has anyone had this problem before?

Cheers

[alias]

Hey LouLou,

It would be much easier to determine the problem if you're provide the menu HTML code and the according CSS.

--
alias

[LouLou]

Sure here's the css, html and js file:

#vertnav{list-style: none; margin-left:5px; }

#vertnav ul { padding:0; margin:0; list-style:none; z-index:99; overflow:visible; position:absolute; }

.about{width:4.5em; }
.publications{width:5.8em;}
.news{width:6.5em;}
.careers{width:4.1em;}
.diary{width:5.4em;}
.faq{width:3em;}
.contact{width:5.2em;}

/*level 1*/
#vertnav li { position:relative; height:auto; }
#vertnav li a { background-image:url(../images/arrow.gif); background-repeat:no-repeat; background-position:right; }
#vertnav li a:hover { background-image:url(../images/arrow.gif); background-repeat:no-repeat; background-position:right;color:#C81D23; }

/*level 2*/
#vertnav ul li{background-color:#e7e8ea; top:21px; left:0px; font-size:1em; width:150px; background-image:url(../images/chevron1.gif); background-repeat:no-repeat; background-position:95%; }/*level 2*/
#vertnav ul li a{background-image:url(../images/chevron1.gif); background-repeat:no-repeat; background-position:95%;}
#vertnav ul li a:hover{background-image:url(../images/chevron2.gif); background-repeat:no-repeat; background-position:95%; color:#FFFFFF; background-color:#6e6f71;color:#ffffff;}

/*level 3*/
#vertnav ul ul li{background-color:#e7e8ea; top:0px; font-size:1em;background-image:url(../images/chevron1.gif); background-repeat:no-repeat; background-position:95%;}
#vertnav ul ul li a{background-image:url(../images/chevron1.gif); background-repeat:no-repeat; background-position:95%;}
#vertnav ul ul li a:hover{background-image:url(../images/chevron2.gif); background-repeat:no-repeat; background-position:95%;background-color:#6e6f71;color:#ffffff;}

/*level 4*/
#vertnav ul ul ul li{background-color:#e7e8ea; top:0px; font-size:1.1em; background-image:url(../images/chevron1.gif); background-repeat:no-repeat; background-position:95%;}
#vertnav ul ul ul li a{background-image:url(../images/chevron1.gif); background-repeat:no-repeat; background-position:95%;}
#vertnav ul ul ul li a:hover{background-image:url(../images/chevron2.gif); background-repeat:no-repeat; background-position:95%;background-color:#6e6f71;color:#ffffff;}

#vertnav li:last-child {border-bottom:0px solid #CECECE; background-color:#e7e8ea}/*firefox last child*/

#vertnav a { text-decoration:none; display:block; padding:0em; margin:0; /*helps IE with hover */ height:16px; padding-top:4px;padding-left:3px;color:#6e6f71; font-size:0.75em; }

html> #vertnav a { margin:0.2em 0 0.2em 0.1em; /*helps Opera with hover */ }

#vertnav li:hover, #vertnav a:hover{ background-image:none; }

#vertnav ul{ display:none; position:absolute; top:0px; left:0em; }
#vertnav ul ul{ top:0px; left:150px; }
#vertnav ul ul ul{ top:0px; left:150px;}

#vertnav li:hover ul ul, #vertnav li:hover ul ul ul{ display:none; }
#vertnav li:hover ul, #vertnav ul li:hover ul, #vertnav ul ul li:hover ul{ display:block;}

li>ul { top: auto;left: auto;}

/* Win IE only \*/
* html #vertnav li{float:left;}
/* end holly hack */

html>body #vertnav li{float:left;}

here's the html:

<ul id="vertnav">
<li class="about"><a href="http://www.bbc.co.uk">About Us</a><ul>
<li><a href="#">level 2 </a></li>
<li><a href="#">first level 2</a><ul>
<li><a href="#">first level 3</a>
<ul>
<li><a href="#">first level 4</a></li>
<li><a href="#">first level 4 </a> </li>
</ul>
</li>
<li><a href="#">first level 3</a></li>
</ul>
</li>
<li><a href="#">second level 2</a>
<ul>
<li><a href="#">second level 3</a></li>
<li><a href="#">second level 3</a></li>
<li><a href="#">second level 3</a> <ul>
<li><a href="#">second level 4</a></li>
<li><a href="#">second level 4</a></li>
<li><a href="#">second level 4</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="publications"><a href="#">Publications
</a>
<ul>
<li><a href="#">level 2</a></li>
<li><a href="#">level 2</a></li>
<li><a href="#">level 2</a>
<ul>
<li><a href="#">level 3</a></li>
<li><a href="#">level 3</a></li>
<li><a href="#">level 3</a> <ul>
<li><a href="#">level 4</a></li>
<li><a href="#">level 4</a></li>
<li><a href="#">level 4</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="news"><a href="#">News & Events
</a>
<ul>
<li><a href="#">level 2</a></li>
<li><a href="#">level 2</a></li>
<li><a href="#">level 2</a><ul>
<li><a href="#">level 3 </a></li>
<li><a href="#">level 3 </a></li>
<li><a href="#">level 3 </a></li>
</ul>
</li>
</ul>
</li>
<li class="careers"><a href="#">Careers</a>
<ul>
<li><a href="#">level 2</a></li>
<li><a href="#">level 2</a></li>
<li><a href="#">level 2</a>
<ul>
<li><a href="#">level 3 </a></li>
<li><a href="#">level 3 </a></li>
<li><a href="#">level 3 </a></li>
</ul>
</li>
</ul>
</li>
<li class="diary"><a href="#">Diary Dates </a><ul>
<li><a href="#">level 2</a></li>
<li><a href="#">level 2</a></li>
<li><a href="#">level 2</a>
<ul>
<li><a href="#">level 3</a></li>
<li><a href="#">level 3</a></li>
<li><a href="#">level 3</a></li>
</ul>
</li>
</ul>
</li>
<li class="faq"><a href="#">FAQ </a><ul>
<li><a href="#">level 2</a></li>
<li><a href="#">level 2</a></li>
<li><a href="#">level 2 </a>
<ul>
<li><a href="#">level 3</a></li>
<li><a href="#">level 3</a></li>
<li><a href="#">level 3</a></li>
</ul>
</li>
</ul>
</li>
<li class="contact"><a href="#">Contact Us</a>
<ul>
<li><a href="#">Level 2</a>
<ul>
<li><a href="#">Level 3</a> </li>
</ul>
</li>
</ul>
</li>
</ul>

here the js file:

activateMenu = function(nav) {

/* currentStyle restricts the Javascript to IE only */
if (document.all && document.getElementById(nav).currentStyle) {
var navroot = document.getElementById(nav);

/* Get all the list items within the menu */
var lis=navroot.getElementsByTagName("LI");
for (i=0; i<lis.length; i++) {

/* If the LI has another menu level */
if(lis[i].lastChild.tagName=="UL"){

/* assign the function to the LI */
lis[i].onmouseover=function() {

/* display the inner menu */
this.lastChild.style.display="block";
}
lis[i].onmouseout=function() {
this.lastChild.style.display="none";
}
}
}
}
}
window.onload= function(nav){
/* pass the function the id of the top level UL */
/* remove one, when only using one menu */
// activateMenu('nav');
activateMenu('vertnav');
}