请帮我设计此垂直菜单的样式

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: ...; 
}