請幫我設計此垂直菜單的樣式

Question

如何使用id="mathi"設置<li>元素的樣式，以便我可以使用三個元素設計菜單風格？

我想給每個父母和孩子的菜單中單獨的背景。

<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

您不能有多個具有相同ID的元素。如果您需要每個列表都具有相似的格式，並且有細微差別，那麼您可以對每個元素應用一個類。

<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> 

然後CSS：

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