If you are a legacy users like myself, you will know that Joomla 1.0 and 1.5 both had the built in ability to align menu items horizontally and put a spacer in between your menu items with ease. For some reason the brains behind Joomla thought it would be a good idea to remove this feature in Joomla 2.5, - Why? I have no idea.

Solution

If you have never worked with CSS before, don't worry, this tutorial will explain how to get horizontal menus with ease without having to know any code

Step 1

If you want to achieve a menu which looks like the one above, you must first have your css script which is shown below.

#footermenu li
{
  display:inline;
  list-style-type:none;
  border-left:1px solid #fff;
  padding-left:7px;
}

Step 2

Go to your Joomla administrator panel and log in (www.mysite.com/administrator)

Click On "Extensions"

Click On "Template Manager"

Click On Templates

Click On Your Template Name

Click On "Edit css/templates.css

Scroll to the bottom of the window that has opened

Copy And Paste the Above code into the box

Click On "Save & Close

Step 3

Click On "Extensions"

Click On "Module Manager"

Click On your footer menu module (it should be of "type" menu)

Click On Advanced Options

Under "Menu Tag ID, put in "footermenu" without the ""'s

Click On Save And Close

You will now notice your menu is horizontal,and has divider bars, but there is a problem, the one on the left has a divider bar at the start, it shouldn't be there right? Not a big deal

Step 4

To remove the bar on the left you must find out which item id your first menu option has

Go to your administrator panel again

Click on "Menu's"

Click on your footer menu title

The top of the list should be your first menu item, on the far right hand side is its "ID", remember this or write it down, for me it was 101, but for you it could be 132, 147 or any number

Step 5

Click On "Extensions"

Click On "Template Manager"

Click On Templates

Click On Your Template Name

Click On "Edit css/templates.css

Scroll to the bottom of the window that has opened

Copy And Paste the Below code into the box

Change item-101 to being "item-___", the ___ being your menu item id

Click On "Save & Close

#footermenu li.item-101
{
border-left:none;
}

There we go, its all done and working now, piece of cake eh? ;-)