How to create a number list 1, 2, 3, and Sub number list 1.1, 1.2, 1.3 … HTML list?

CSS Code:
ul.numeric-decimals { counter-reset:section; list-style-type:none; }
ul.numeric-decimals li { list-style-type:none; }
ul.numeric-decimals li ul { counter-reset:subsection; }
ul.numeric-decimals li:before{
    counter-increment:section;
    content:counter(section) ". ";/*content:"Section " counter(section) ". ";*/
}
ul.numeric-decimals li ul li:before {
    counter-increment:subsection;
    content:counter(section) "." counter(subsection) " ";
}

Html Code:

<ul class="numeric-decimals">

  <li>Cats

    <ul>

      <li>Birds</li>

      <li>Rats</li>

    </ul>

  </li>

  <li>Dogs

    <ul>

      <li>Birds</li>

      <li>Rats</li>

    </ul>

  </li>

  <li>Rabbits</li>

  <li>Ants

    <ul>

      <li>Lions</li>

      <li>Rats</li>

    </ul>

  </li>

  <li>Ducks</li>

</ul>