[CSS] li's op alleen 1e niveau van nested list aanspreken

[Reveller]

De volgende nested list:

HTML:

<ul>
  <li>vlees
  <li>groenten
    <ul>
      <li>bloemkool</li>
      <li>andijvie</li>
    </ul>
  </li>
  <li>fruit
    <ul>
      <li>appels</li>
      <li>peren</li>
    </ul>
  </li>

Wil ik er zo uit laten zien:

code:

vlees

groenten
  - bloemkool
  - andijvie

fruit
  - appels
  - peren

Met andere woorden, elke li van het eerste niveau moet een margin-top van enkele pixels krijgen. Ik had daartoe de volgende css geschreven:

Cascading Stylesheet:

ul {
  list-style: none;
}

li { /* werkt niet, evenals "ul li", "ul>li" en "ul.li" en "li.ul" */
  margin-top: 15px;
}

ul ul {
  list-style: square;
  margin-left: 20px;
}

De margin-top die ik hierin aangeef, wordt alleen door ALLE li's overgenomen, ook die van het 2e niveau. Alternatieven, zie css, werkten evenmin. Wat doe ik verkeerd?

[Palomar]

ul li ul al geprobeerd?
[edit] never mind, niet goed gelezen wat je nou precies wilde...

[ Voor 61% gewijzigd door Palomar op 11-02-2011 16:36 ]

[Bosmonster]

ul.class>li

(even ervanuit gaande dat je hoofd ul een class heeft)

[ Voor 86% gewijzigd door Bosmonster op 11-02-2011 16:35 ]

[OkkE]

Wat Bosmonster zegt. Anders kan je het altijd nog zo doen:

code:

li { margin-top: 20px; }
li li { margin-top: 0px; }

[ Voor 13% gewijzigd door OkkE op 11-02-2011 16:39 ]