Add Horizontal Menu in Joomla 3.1

Today we are going to create a horizontal menu. See Figure 1.

Figure 1

First Let's we edit the css file. Add following code into your css file.

#topmenu li
{
  display:inline;
  padding-left:7px;
}
#topmenu li a
{
   text-decoration:none;
   color: #FFFFFF;
   font-family: verdana;
   font-size: 12px;
   padding-left: 12px;
}

Then go to the "Add New Menu" as shown in Figure 2.

Figure 2

Add new menu and Menu Items to that menu.

Then go to Module Manager. See Figure 3.

Figure 3

Add new module and go to Options tab and select Advanced Options. Type Menu Tag ID same as you mentioned in your stylesheet. Here we used "topmenu" as our menu ID in stylesheet code. So here we enter topmenu in Menu Tag ID Field.

That's all. Now you will have a horizontal menu as shown in Figure 1.