Home » Internet » Web Designing » How to create a horizontal list menu with CSS

How to create a horizontal list menu with CSS



You most probably want to create a horizontal menu for your top navigation bar. You can either use a table with horizontally arranged cells where you can put the links. A more simpler method would be just to use a paragraph tag and then put the hyperlinks separated by spaces, something like

Item 1 Item 2 Item 3 Item 4

The problem with this method is, due to the fact that all the links will be present within paragraph tags, the search engines won’t attach extra significance to the links. On the other hand, if you use a bulleted list to arrange your top navigation items, search engines like Google that take bulleted lists quite seriously, will immediately know that first, since these links are appearing at the top, and second, since they are appearing as a bulleted list, they must be quite important. Of course for SEO benefits you should also use your primary keywords as hypertext instead of simply Item 1, Item 2, etc.

Why not tables? The use of tables have been deprecated and in most of the cases they are not W3C compliant. It doesn’t mean that you cannot use them (almost everybody does), but the most search engine friendly and preferred way of creating horizontal menu bars is creating list menus with CSS.

Conventionally, list menus appear vertically, something like

* Item 1
* Item 2
* Item 3
* Item 4

This arrangement may look good on a webpage or on a blog post, or even on the sidebar, but as top navigation it won’t look good. The items need to be arranged horizontally rather than vertically, as demonstrated above within the paragraph tags.

Let’s create a simple list first of all:

<ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
</ul>

This will create a simple vertical bulleted list. You will use the following CSS definitions to arrange this list horizontally:

<style>
#listmenu li{
        display:inline;
}
</style>

Now the list will appear something like:

Horizontal bulleted list

This arranges the bulleted list items horizontally. But as you can see there isn’t much space between items and people might not be able to distinguish between one menu item from another. So you will need to add another line to your CSS definitions:

<style>
#listmenu li{
        display:inline;
        padding-right:40px;
}
</sty

This creates a padding of 40 pixels on the right hand side of every menu item and consequently your menu looks like this:

Horizontal bulleted list with CSS formatting

If you have been testing the code along with this tutorial you must be wondering why the CSS changes are not being reflected when you check the webpage. In order to achieve this, you will need to refer to the right CSS ID, in this case “listmenu”; here is how you do it

<ul id=”listmenu”>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
</ul>

Of course when you actually implement this list menu you will be using hypertext instead of simply Item 1 etc. You may also like to use different CSS formatting definitions to make the menu look the way you want it.