You seem to have everything written inside the same list. If you use different lists inside each other, like in the right side of your top image, you can assign classes to each "level". Suppose you have:

<ul>
  <li> Item 1
     <ul>
        <li> Item a </li>
        <li> Item b </li>
     </ul>
  </li>
  <li> Item 2
     <ul>
        <li> Item c </li>
        <li> Item d </li>
     </ul>
  </li>
</ul>

You can give the different levels of the hierarchy some images using classes.

So for your first li it will be a background-image of, say |--. For li>li it would be |---. And for li>li>li it would be |----. One image for each level.

.nav ul li {background-image:url("image1.jpg"); padding-left:50px;}
.nav ul li ul li {background-image:url("image2.jpg"); padding-left:60px;}

You seem to have everything written inside the same list. If you use different lists inside each other, like in the right side of your top image, you can assign classes to each "level". Suppose you have:

<ul>
  <li> Item 1
     <ul>
        <li> Item a </li>
        <li> Item b </li>
     </ul>
  </li>
  <li> Item 2
     <ul>
        <li> Item c </li>
        <li> Item d </li>
     </ul>
  </li>
</ul>

You can give the different levels of the hierarchy some images using classes.

So for your first li it will be a background-image of, say |--. For li>li it would be |---. And for li>li>li it would be |----. One image for each level.

.nav ul li {background-image:url("image1.jpg"); padding-left:50px;}
.nav ul li ul li {background-image:url("image2.jpg"); padding-left:60px;}

For special items, for example the last item, you can use pseudoclasses like ul > li:last-child: