Horizontal List Demo

Style a list to appear horizontally with a hover colour on each list item.

20th October 2004 · Last updated: 5th October 2016
 

Comments

This demo shows how to style an HTML list to appear horizontally, complete with a hover colour on each list item. It's based on the demos at Listamatic which I have improved to allow for current browsers.

Comments (7)

Comments are locked on this topic. Thanks to everyone who posted a comment.

  1. Jens Grochtdreis:
    Although I am not a native English-speaker I recognize, that you must either mean "horizontically" or uploaded the wrong example!
    Greetings from Germany,

    Jens Grochtdreis

    Posted on 22 October 2004 at 7:34 am
  2. Chris Hester:
    Oooops! That's what happens when you spend too long on a new layout! What can I say? Gulp... I'll change the title later - thanks for the post! What a silly mistake I made there!

    Posted on 22 October 2004 at 9:45 am
  3. manu:
    geile sache! das sieht echt klasse aus.

    Posted on 23 October 2004 at 6:30 pm
  4. Chris Hester:
    Vielen Dank!

    Posted on 23 October 2004 at 9:07 pm
  5. Hunox:
    The list items appear without vertical separators in IE5.1/WinXP.

    Posted on 30 October 2004 at 7:53 pm
  6. Chris Hester:
    Probably due to the infamous broken box model in IE5. Upgrade to IE6 if you can, there are many improvements.

    Posted on 30 October 2004 at 9:10 pm
  7. Scott:
    Literally, JUST getting started with the idea of NoFrames / NoBorders / CSS & XHTML. Like the liquid design, cross-browser support, separation of design-content, CSS rollover, non-java menus ... etc. that CSS/XHTML offers.

    Really liked your improvements on the orig Listmatic submission (noticed the weird gaps on rollover - MSIE6).

    RE: Liquid design - when you squish down your menu till it wraps, I noticed some overlap because of the line-height/padding/margin choices. I don't know if this issue can be resolved if you want to use 'background color' for the 'navbox ul' (use a simple background image instead?)

    One can change "Item Nos" to "Item&nbsp;Nos" to keep the menu 'buttons' together (don't forget to add breaking spaces between </li> <li> tags for proper wrapping)

    Also - I don't quite understand the issue with font-size:100%. What happens in what browser (I changed size in both MSIE6 & Moz/FireFox1 w/out an apparent issue?) Would using an em size designation help?

    Thanks for the demo - a great jumping off spot for a CSS newbie like me!

    Posted on 18 December 2004 at 10:20 pm