Please help me to style this vertical menu

How would I style a <li> element with id="mathi" so that I can stylize a menu with three elements?

I would like to give each one a separate background in both parent and child menus.

<ul id="MyMenu">
  <li id="mathi">info 1
    <ul class="inner">
       <li>apple1</li&g开发者_如何学运维t;
       <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>

You can't have multiple elements with the same id. If you need each of the lists to have similar formatting with slight differences then you could apply a class to each element.

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

then for CSS:

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