S'il vous plaît aidez-moi à styliser ce menu vertical

Question

Comment est-ce que je créerais un élément <li> avec id="mathi" pour que je puisse styliser un menu avec trois éléments?

Je voudrais donner à chacun un arrière-plan séparé dans les menus parent et enfant.

<ul id="MyMenu"> 
    <li id="mathi">info 1 
    <ul class="inner"> 
     <li>apple1</li> 
     <li>mango1</li> 
     <li>banana1</li> 
    </ul> 
    </li > 
    <li id="mathi">info 2 
    <ul class="inner"> 
     <li>apple2</li> 
     <li>mango2</li> 
     <li>banana2</li> 
    </ul> 
    </li> 
    <li id="mathi">info 3 
    <ul class="inner"> 
     <li>apple3</li> 
     <li>mango3</li> 
     <li>banana3</li> 
    </ul> 
    </li> 
</ul> 

Answer 1

Vous ne pouvez pas avoir plusieurs éléments avec le même ID. Si vous avez besoin d'une mise en forme similaire pour chacune des listes avec de légères différences, vous pouvez appliquer une classe à chaque élément.

<ul id="MyMenu"> 
    <li id="math1" class="math">info 1 
    <ul class="inner"> 
     <li>apple1</li> 
     <li>mango1</li> 
     <li>banana1</li> 
    </ul> 
    </li > 
    <li id="math2" class="math">info 2 
    <ul class="inner"> 
     <li>apple2</li> 
     <li>mango2</li> 
     <li>banana2</li> 
    </ul> 
    </li> 
    <li id="math3" class="math">info 3 
    <ul class="inner"> 
     <li>apple3</li> 
     <li>mango3</li> 
     <li>banana3</li> 
    </ul> 
    </li> 
</ul> 

puis CSS:

.math{ 
    /* common formatting */ 
} 
#math1{ 
    background-color: ...; 
} 
#math2{ 
    background-color: ...; 
} 
#math3{ 
    background-color: ...; 
}