ul and li like this example in photo inbox

i have a sidebar with a list of links how can i do the vertical line that connect between title of list and other under list image description

and my code html :

<div style="color: white; padding-left: 50px; margin-top: 30px;">
  <li style="color: white; " ><B>Menu Principal</B> </li>
</div>

<li class="active opened active has-sub" style="margin-top: 25px;">
  <a routerLink="/Construction-data">
    <i class="entypo-gauge"></i>
    <span class="title">Base de Données</span>
  </a>
</li>
  <ul class="visible">
    <li class="active">
      <a routerLink="/Construction-data">
        <span class="title">Conception</span>
      </a>
    </li>
    </ul>
    <ul>
    <li>
      <a routerLink="/construction">
        <span class="title">Construction</span>
      </a>
    </li>
  </ul>
  <ul>
    <li>
      <a routerLink="/Exploitation-data">
        <span class="title">Exploitation</span>
      </a>
    </li>


  </ul>