Joomla! has a problem that you may or may not know about. It is a minor problem (or major, depending on whom you ask), and it will not really affect how your website functions.

The problem exists in how Joomla! renders menus. By default, the main element that contains the menu (in the case of a "flat list" menu, it is the "ul" element) is given an id=mainlevel. This is not a problem if you are using one menu on a page. But, if you are using multiple menus on a single page, there is a conflict.

Proper XHTML markup should not have more than one element with the same id. An id should be unique for each element that is given an id, so the browser can tell them apart for the purpose of style sheets and javascript. If you use multiple menus on the same page, you are using improper XHTML markup, and you will fail XHTML validation.

You can rest easy, though, because there is a solution. Read on to find out what it is.

The Solution

The Joomla! core development team is full of web development experts and people much smarter than I am. They anticipated this problem, and they have provided a solution.

When a menu is created in the Menu Manager, a corresponding menu module is created in the Module Manager. In the Module Manager, click on one of your menu modules, and you will see parameters. One of those parameters is the "Menu Class Suffix". Here, you can give a unique suffix to each menu that will appear on the same page.With the menu suffix in place, your menu's new id will be "mainlevelsuffix". By giving each menu a unique suffix, you will ensure that there will be no conflicting id's in your XHTML markup.

Please note that by changing your menu's id, you will also change how it appears because your CSS file is likely set to modify the menu element with id=mainlevel. You will need to make the appropriate changes to your template css file to ensure that your menus are rendered properly. If you have any qeustions about this, please post them in the comments, and I will do my best to answer them.