I've got a css dropdown that works, but I need the individual menu items to be styled. As soon as I add the unique ID to each menu it obviously stops working. What do I need to change to make it work again? Thanks

<!-- function validateForm( frm ) { var valid = document.formvalidator.isValid(frm); if (valid == false) { // do field validation if (frm.email.invalid) { alert( "Please enter a valid e-mail address:" ); } else if (frm.text.invalid) { alert( "Please make sure the form is complete and valid." ); } return false; } else { frm.submit(); } } // -->

The Menu

Home People Trustees Staff Projects Contact us Directions

Can't see much wrong with the menu structure, but do you really need an id for both the li and the link? Seems like a double up to me. If you need individually styled menu items, I'd tend to id and style only the link tags and let your css dropdown do it's thing on the the ul's and li's. That's probably where it's broken imho.

I take it that is Joomla (document.formvalidator) but the jQuery validation is much more concise and nice (IMHO) so i'd use that personally.

That said, the js shown above, is not involved in your problem - what is the CSS? Do you have an example up on a public site?

Also - you should only really need an id on the - the a tag inside can be targeted as that li's first child, for cleaner, more readable code.

Yeah. If if take out the number it works perfectly, but I need to change the javascript to allow for the numbering, and I don't know how.

I'm guessing the selector isn't working because of the numbering -- you should change it to select based on the class instead of the ID, or use something like [id^{="menulink_"]} i.e. 'starts with'.

Apologies....this is the right js

<!--//--><![CDATA[//><!-- sfHover = function() { var sfEls = document.getElementById("mainlevelmainnav").getElementsByTagName("LI"); for (var i=0; i<!]]>

use jQuery, remove the id from the LI elements and give them a common class name e.g. 'menuItem'

then your jquery:

$(document).ready(function() { $('.menuItem').hover( function () { $(this).addClass("sfhover"); }, function () { $(this).removeClass("sfhover"); } ) });

or if you need the unique id for other scripting change the selector from

$('.menuItem').hover(

to $('li[id^{="menuitem"]').hover(}

Sorry, I assumed you were using jQuery.

OK, well it's not the numbering that's the problem, it's that you're using the wrong ID for the UL element -- it should be

 var sfEls = document.getElementById("menulist_rootmainnav").getElementsByTagName("LI");

Plus, window.attachEvent() works in IE but nothing else -- you'll need something like addEventListener() for all the other browsers.

Two words: use jQuery.

EDIT: Too slow! Anyway, what Techno said.

You're welcome.