Sæt stil på li

Hej

Jeg er CSS novise, jeg har en menu med forskellige punkter og underpunkter. Sagen er den, at jeg gerne vil have underpunkter rykket lidt ind og underunderpunkter lidt mere osv....

Menuen ser ud således
<div id="menu"><h2><span>Dette er hoved-menu'en</span></h2>
<ul>

    <li class="lev0"><a href="menu.asp?id=7&line=0,7"
        onclick="parent.hovedramme.location='page.asp?id=5'"
    >Forside</a></li>
   
    <li class="lev0"><a href="menu.asp?id=8&line=0,8"  >Bestyrelsen</a></li>
   
    <li class="lev1"><a href="menu.asp?id=15&line=0,8,15"
        onclick="parent.hovedramme.location='page.asp?id=2'"
    >Bestyrelsen</a></li>
   
    <li class="lev1"><a href="menu.asp?id=16&line=0,8,16"
        onclick="parent.hovedramme.location='page.asp?id=4'"
    >Referater</a></li>
   
    <li class="lev0"><a href="menu.asp?id=9&line=0,9"
        onclick="parent.hovedramme.location='page.asp?id=7'"
    >Kalender</a></li>
   
    <li class="lev0"><a href="menu.asp?id=10&line=0,10"
        onclick="parent.hovedramme.location='page.asp?id=6'"
    >Resultater</a></li>

Min style ser såldes ud:

#menu {  position: absolute;  top: 25px;  left: 0px;  background-color: #88F;  color: black;  height: 350px;}
#menu ul {  margin: 0px;  padding: 0px;}
#menu l1.lev0 {color: red; }
#menu l1.1 {padding: 1px;}
#menu h2 {  display: none;}
#menu a {  text-decoration: none;  color: black;  background-color: transparent;  width: 120px;  display: block;}
#menu a:hover {  color: black;  background-color: #44B;}



Jeg har prøvet at styre det med class = "lev?" og så få den til at male teksten rød, bare som en test. Men det virker ikke. Hvordan skal man gøre, hvis man vil differentiere niveauer og hvordan får man den til at rykke ind?

Rasmus