[CSS] Uitklapmenu met andere kleur voor elk niveau

[Reveller]

Ik heb het volgende:

HTML:

<style>
ul {
    list-style: none;
    margin: 0px;
    background: red;
}

.ul0 {
    padding-left: 0px;
    background: lime;
}

.ul1 {
    padding-left: 15px;
    background: green;
}

.ul2 {
    padding-left: 15px;
    background: blue;
}

.ul3 {
    padding-left: 15px;
    background: red;
}
<style>


<ul class="ul0">
  <li class"li0-off"><a class="a0-off" href="">over_kwispel</a></li>
  <li class"li0-on"><a class="a0-on" href="">abonnementen</a></li>
    <ul class="ul1">
      <li class"li1-on"><a class="a1-on" href="">bejaarden</a></li>
        <ul class="ul2">
          <li class"li2-off"><a class="a2-off" href="">mannen</a></li>
          <li class"li2-on"><a class="a2-on" href="">vrouwen</a></li>
            <ul class="ul3">
              <li class"li3-off"><a class="a3-off" href="">mooi</a></li>
              <li class"li3-off"><a class="a3-off" href="">lelijk</a></li>
            </ul>
        </ul>
      <li class"li1-off"><a class="a1-off" href="">jongeren</a></li>
    </ul>
  <li class"li0-off"><a class="a0-off" href="">contact</a></li>
  <li class"li0-off"><a class="a0-off" href="">diensten</a></li>
</ul>

Dit heeft als output:


Maar ik wil graag dit:


Ik zit nu al uren te prullen met de padding en margin van ul, li en zelfs a, maar ik krijg het maar niet goed. Wie helpt mij op weg? Alvast bedankt

[ Voor 54% gewijzigd door Reveller op 06-07-2004 12:56 ]

[SchizoDuckie]

tipje: zet de margin-left van je LI's en UL's eens op een - (min) waarde

[Reveller]

@Papa Eend - dank je wel! Daar zou ik met mijn kennis in nog geen dagen aan gedacht hebben

Heb ik nog 1 probleem: ik wil graag "bejaarden" een witte achtergrond geven, en heb dus de stylesheet aangepast:

HTML:

...eerdere meuk...

.li1-on {
    background: #ffffff;
}

Maar dit werkt niet. Hoe kan dat nu? Ik moet toch een li ook een achtergrondkleur mee kunnen geven?

[Verwijderd]

background-color

[Reveller]

@Mophor: Dat werkt ook niet. Maar in CSS wordt een achtergrondkleur toch nooit met background-color aangegeven?

• Wordt de LI background soms overruled door de UL background en zo ja, hoe draai je dat om?

[ Voor 90% gewijzigd door Reveller op 06-07-2004 13:44 ]

[crisp]

Persoonlijk zou ik geen

HTML:

<ul>
  <li></li>
  <ul>
    <li></li>
  </ul>
</ul>

gebruiken, maar

HTML:

<ul>
  <li>
    <ul>
      <li></li>
    </ul>
  </li>
</ul>

Je mag namelijk niet direct een ul in een ul nesten

[Reveller]

Mijn originele probleem is opgelost, zie code uit begin post:

HTML:

<li class"li0-on"> <------ nu: <li class="li0-on">

Foutje in mijn script. Zo werkt het wellicht beter
@crisp - dank je! Ik heb nu dit, maar zit nu met een laatste probleem:

code:

<ul class="ul0">
  <li class"li0-off"><a class="a0-off" href="">over_kwispel</a></li>
  <li class"li0-on"><a class="a0-on" href="">abonnementen</a></li>
  <li>
    <ul class="ul1">
      <li class"li1-on"><a class="a1-on" href="">bejaarden</a></li>
      <li>
        <ul class="ul2">
          <li class"li2-off"><a class="a2-off" href="">mannen</a></li>
          <li class"li2-on"><a class="a2-on" href="">vrouwen</a></li>
          <li>
            <ul class="ul3">
              <li class"li3-off"><a class="a3-off" href="">mooi</a></li>
              <li class"li3-off"><a class="a3-off" href="">lelijk</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li class"li1-off"><a class="a1-off" href="">jongeren</a></li>
    </ul>
  </li>
  <li class"li0-off"><a class="a0-off" href="">contact</a></li>
  <li class"li0-off"><a class="a0-off" href="">diensten</a></li>
</ul>

Dit geeft de volgende output:



• Hoe krijg ik nu de [enter] tussen abonnementen en bejaarden en tussen vrouwen en mooi weg?

[ Voor 32% gewijzigd door Reveller op 06-07-2004 15:27 ]

[Blaise]

met margin of padding (css)

[Reveller]

Dat werkt dus niet. Ik heb dit

HTML:

ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.ul0 {
    padding: 0px;
    background: lime;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

Al geprobeerd maar dat haalt niets uit...

[djluc]

Reveller schreef op 06 juli 2004 @ 15:34:
Dat werkt dus niet. Ik heb dit

HTML:

[...]

Al geprobeerd maar dat haalt niets uit...

Misschien moet je eens de style van je li en a aanpassen?

Je HTML lijkt me trouwens een beetje dubbel-done. Die a hoef je geen echte class mee te geven. Met CSS kan je ook een element binnen een ander element vormgeven.

[ Voor 24% gewijzigd door djluc op 06-07-2004 18:04 ]