Styling your listsusing only CSS

Marcofolio.net

List #1 : Simple navigation <ul>

List #2 : Different font for numbering <ol>

  1. The Netherlands is a country in Northwestern Europe, constituting the major portion of the Kingdom of the Netherlands.

  2. The United States of America is a federal constitutional republic comprising fifty states and a federal district.

  3. The Philippines officially known as the Republic of the Philippines, is a country in Southeast Asia with Manila as its capital city.

  4. The United Kingdom of Great Britain and Northern Ireland is a sovereign state located off the northwestern coast of continental Europe.

List #3 : Image bullets <ul>

List #4 : iPhone Style List <ul>

List #5 : Nested lists <ol>

  1. Google
    1. Picasa
    2. Feedburner
    3. Youtube
  2. Microsoft
    1. Corel Corporation
    2. Zignals
    3. ByteTaxi
  3. Yahoo!
    1. Xoopit
    2. BuzzTracker
    3. MyBlogLog

List #6 : Roman numbering + inline multiline <ol>

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Fusce sit amet eros ut leo consectetur fermentum eget a dui.
  2. Aenean placerat lectus tristique est tempus feugiat.
    Vivamus interdum dapibus suscipit.
    Donec eu adipiscing ligula.
  3. Mauris eget sapien arcu, vitae feugiat risus.
    Phasellus neque risus, egestas tincidunt blandit vel, suscipit vitae sem.
  4. Phasellus feugiat lacus at dolor auctor volutpat.
    Duis rhoncus sollicitudin imperdiet.

List #7 : Comma separated inline list <ol> + pseudo-element

List #8 : Rotated navigation <ul> + CSS3