How to make a HTML list appear horizontally instead of vertically using CSS only?

Question

I need this because I want to make a menu (which is made from a HTML list) appear horizontally.

*I prefer not to use absolute positioning since it might become messy when I start changing the layout of the page.

Edition 01

I would like also to remove the indenting of the sub-lists, is it possible?

Answer 1

quite simple:

ul.yourlist li { float:left; }

or

ul.yourlist li { display:inline; }

Answer 2

See http://css.maxdesign.com.au/listamatic/, this will give you useful hints.

Answer 3

You will have to use something like below

#menu ul{
  list-style: none;
}

#menu li{
  display: inline;
}

and then

<div id="menu">
  <ul>
    <li>First menu item</li>
    <li>Second menu item</li>
    <li>Third menu item</li>
  </ul>
</div>

Answer 4

See http://www.cssplay.co.uk/menus/