Vertical vs. Horizontal

TOC

 symptom 

You want to display a horizontal menu (e.g. you are using the menu template son-of-suckerfish-horizontal) but it appears vertical instead.

 cause 

A common cause for this problem is that the parent element of the menu (usually a div) is not wide enough. The HTML code (simplified) may look like this:
  1. <div>
  2.   <ul class="mainlevel">
  3.     <li>Menu Item 1</li>
  4.     <li>Menu Item 2</li>
  5.     <li>Menu Item 3</li>
  6.   </ul>
  7. </div>
To make it appear horizontal the CSS usually makes each li element to "float left". That means the first menu item will start at the left border (of the parent) and each subsequent menu item will be positioned right next to the previous menu item on the same line - if there is enough space, it will be positioned on the next line otherwise.
If the above div element is either very small or set to use as little as possible space then the menu items will not positioned in one line anymore and appear vertical.

 solution 

If you are not a CSS expert you may find it difficult to modify the CSS to allow the div to be as wide as necessary. The easiest way to fix it is to set a fixed width instead, either for the div element or the ul element itself.
For example with the following CSS:
  1. ul.mainlevel {
  2.     width: 50em;
  3. }

Please note that usually a class suffix is used. You can look at the HTML source your browser receives to make sure you enter the correct CSS.