I know there are a million and one examples out there about how to create horizontal menus using unordered lists. The issue is that most don’t center and have no fixes for menu items that break in the middle of the phrase. This example is for a “typical” horizontal footer menu.
When creating your Joomla menu be sure to set the menu to LIST. This inserts the menu item id on each item so you can control individual items. Unfortunately, there is no way to have a “smart menu” where it automatically detects where borders should be removed after it wraps. If you do have control of the site though and items aren’t changing a lot then this is a perfect solution. Here is the CSS code:
#footer ul {
width: 700px;
margin: 0 auto 10px;
display: inline-block;
}
#footer ul li {
display: inline;
white-space: normal;
}
#footer ul li a {
padding: 0 15px;
border-left: solid 1px #666;
display: inline-block;
margin-bottom: 4px;
}
#footer ul li.item102 a {border: none;}
The first part is typical and really needs no explanation. The border: none removes the left pipe on the first item in my menu (will be a different number on each site). Doing a menu this way seems to fix the issue with menu items breaking in the middle of two words at the ends which is a huge bonus as well. I know this has saved me countless hours and I hope it does for you as well!
