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

Question

如何使用 id="mathi" 设置

元素的样式，以便可以使用三个元素对菜单进行样式化？

我想在父菜单和子菜单中为每个菜单提供单独的背景。

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