Please help me to style this vertical menu

Question

Hi friends, how do style li id="mathi" so that I can stylize menus info 1 , info 2 and info 3.

I would like to give 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: ...;
}