When you create a menu with the Joomla! menu manager, a corresponding menu module is automatically created. In the resulting menu module, you will have 3 options for how to display your menu with the "menu style" parameter.
The 3 choices offered are vertical, horizontal, and flat list. In this list, there are 2 ways to create a horizontal menu: the right way, and the not-so-right way. In this article, I will explain both ways, and try to persuade you that the right way is the right way. I'll start with the not-so-right way.
The not-so-right way to create a horizontal menu
As you probably guessed, "vertical" is not one of the 2 choices of menu style that will enable you to create a horizontal menu. (Technically, you probably could create a horizontal menu with this choice by using some really creative and advanced CSS, but that is beyond the scope of this article and probably a bad idea altogether.) So naturally, that only leaves "horizontal" and "flat list". If you think "flat list" is the not-so-right way, you're wrong. Yes, "horizontal" will create a horizontal menu for you, but there is a better way, which I will discuss later.
Menu Style = "horizontal"...the not-so-right way
Setting menu style to "horizontal" will create a horizontal menu. In fact, it is probably the quickest and easiest way to create a horizontal menu in Joomla!. If you do not care about using modern XHTML/CSS techniques in your template, then, by all means, please use this menu style. Here's what it does.
This menu style will render your menu in a one-row, one-column table with each menu item side-by-side with no line breaks between them. Logically, if the menu items are side-by-side with no line breaks, they will appear horizontally. This is what the resulting code looks like (I added the line breaks and code indentions to make it easier to read.), assuming you are using a vertical bar as a separator:
There is nothing wrong with this technique other than the fact that it uses a table as part of the layout. That is why I call it the not-so-right way, and not the wrong way.
The right way to create a horizontal menu
If you're like me, and you want to use modern techniques and proper XHTML markup and CSS in your designs, then set your menu style to "flat list". It renders your menu in an unordered list. This is what the HTML markup looks like (Line breaks and indentions added by me):
Why is this important?
Without CSS to format this HTML markup, this menu will simply display as an unordered, bulletted list, which is exactly what a menu should be. A menu is simply a list of links to help navigate through your site.
OK, but how do I make it horizontal?
The short answer is CSS. Here is one example of what your CSS might look like:
ul#mainlevel {
margin: 0;
padding: 0;
}
ul#mainlevel li {
display: inline; /* Shows each item side-by-side */
list-style-type: none; /* Gets rid of the bullet points */
}
ul#mainlevel a {
display: block;
float: left;
padding: 0 1em; /* Provides horizontal separation between menu items */
}
This is a very basic example, but the options are literally limitless. Below, you will find a list of resources with further explanations and examples for styling a horizontal flat list menu.
Other horizontal list resources
Drawbacks
As much as I would love to tell you that there are no drawbacks to this method, there is currently one major drawback with how Joomla! displays flat list menus. It only displays the main level menu items. If you create a multi-level menu, the sub menus will not display with this method.