Ungeordnete Liste (ul)

Beispiel 1:

Normal

Punkt 1
Punkt 2
Punkt 3

Quellcode:

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

Beispiel 2:

Verschachtelt

Punkt 1
Punkt 2
- Punkt A
- Punkt B
- Punkt C
Punkt 3

Quellcode:

  <ul>
   <li>Punkt 1</li>
   <li class="auf">Punkt 2
    <ul>
     <li>Punkt A</li>
     <li>Punkt B</li>
     <li>Punkt C</li>
    </ul>
   </li>
   <li>Punkt 3</li>
  </ul>

Stylesheet:

  ul {border:1px solid #DDD;width:100px;margin:0;padding:0;}

  ul li {list-style:none outside; background:url(i/liste.gif) 0 1px no-repeat transparent;width:100px;margin:0;padding:0 0 0 12px;}
  ul li.auf {background-image:url(i/liste_auf.gif);}

  ul ul {background-color:#DDD;border:0;width:80px;margin:0;padding:0;}

  ul li ul li {list-style:none outside;background-image:url(i/liste2.gif);border:solid #FFF;border-width:0 0 1px 0;width:80px;margin:0;padding:0 0 0 12px;}

Erläuterungen:

ul: Ungeordnete Liste
li: Listen-Element