Lists are most of the time used to create menus. These menus can easily be shown vertically on one side or another of your website.

Now, most of the time, you will want to have one or two menus showing horizontally (like the top menu on this site, although that one is very specific to the Cute menu module.)

If you are reading this, you probably already know how to create such menus. The HTML code looks like this:

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

Note that sub-menu items are possible too, but this is not the point here since in an horizontal menu you wouldn't show the sub-items.

When you display such a list, it looks like this by default:

• Item 1
• Item 2
• Item 3

Using the appropriate CSS information, one can transform that list in something like this:

  Item 1    Item 2    Item 3

which looks like an horizontal menu.

This is pretty simple:

1. You inform the system that you do not want the bullet (list-style: none in the li and ul tags.)
2. You mark the <li> tags inline

Although you can put more style to change the font size, text color, item tab, etc. all you need to make it look like an horizontal menu is what we just described.

You will then encounter one big problem: by default, the <li> tags will not wrap at all, generating a very long line if you have many items at that level. How do you fix that one?

In the style of the <li> tag, add:

<name> {
  display: inline;
}

This looks good! You now have an horizontal menu created out of a top-down list.

Then you work on your site and the menu grows and grows. To the point when the menu items go to the right side of your available space. Oops! How do you fix that?

There are two possibilities: (1) you create a new menu [at times, this is a good solution] or (2) make it wrap once the right side of the theme is reached.

I usually do the 2nd one since that way it works as the menu grows more and more. (menus such as my navigation...)

The way to do that is by adding a white-space specification as in:

<name> ul {

  white-space: normal;
}

<name> ul a {
  white-space: nowrap;
}

As you can see, we want to remove the wrapping of the anchor, but have the <li> tags wrap to say within the Drupal.

Today I ran in a problem with that scheme. The menu would appear to wrap. I tried all sorts of things and it just did not wrap.

The fact is I added another command in PHP to remove many newlines and spaces. That command would transform my list into a one line list of HTML such as:

  <ul><li>Item1</li><li>Item 2</li><li>Item 3</li></ul>

Works great as a list, but when trying to display that horizontally with the normal/nowrap white-space specification, it would NOT wrap properly (I had different problems depending on the browser, Internet Explorer would do things one way and FireFox would do things in a different way.

Once I finally thought, hey! if there is no space between each list item they cannot be wrapped properly, then it worked again just as mentioned.

Another detail about wrapping. It is often that the second line will appear further to the left. This is because there is a padding in the <ul> tag. Why the padding is lost on the second line isn't clear to me. My point of view is that it is a bug...

You may actually have to play with the padding and margin of the <ul> and <li> elements. The <a> tag will not have a margin since it is a fully inline element.