<div class="content">
  <ul class="services">
    <li class="services__item">Design
      <ul>
        <li>Web</li>
        <li>Mobile</li>
        <li>Graphic</li>
      </ul>
    </li>
    <li class="services__item">Web Development</li>
    <li class="services__item">Mobile Development
      <ul>
        <li>iOS</li>
        <li>Android</li>
        <li>Windows Phone</li>
      </ul>
    </li>
  </ul>
</div>
.content {
  max-width: 600px;
  margin: 0 auto;
  padding: 1rem;
  counter-reset: section;
}

ul {
  list-style: none;
  padding: 0;
}

.services {
  counter-reset: services;
}

.services > li {
  font-weight: bold;
}

.services__item:before {
  counter-increment: services;
  content: counter(services) ".";
  margin-right: 0.5em;
  display: inline-block;
  vertical-align: middle;
}

.services__item {
  margin-bottom: 1rem;
}

.services__item ul {
  counter-reset: sub-services;
  margin-left: 1.35em;
  margin-top: 0.5em;
}

.services__item li {
  font-weight: normal;
  margin-bottom: 0.25rem;
}

.services__item li:before {
  counter-increment: sub-services;
  content: counter(services) "." counter(sub-services);
  margin-right: 0.5em;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.