Please help me to style this vertical menu - css

Question

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

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