box tree structure

by Ea Bangalore

HTML

<ul>

   <li class="" id="UpgradingOrangeBellStarted">Upgrading OrangeBell Started !</li>
   
      <li class="parent">Checking of dependency files/packages completed.</li>
   
   
      <li class="child">Copying necessary modules succesfully !</li>
   
   
      <li class="child">Successfully Installed the packages !</li>
   
   
      <li class="">Completed Shutdown.</li>
   
   
      <li class="child">OrangeBell services states have been saved.</li>
   
   
      <li class="child">OrangeBell services are prepared to be shutdown.</li>
   
   
      <li class="child">OrangeBell services are sucessfully shutdown.</li>
   
	   

	   <li class="" id="BackupCompletedSucessfully">Backup Completed Sucessfully!</li>
	   <li class="" id="UpgradeCompletedSucessfully">Upgrade Completed Sucessfully!</li>
  
   
      <li class="child">Started back the stopped services succesfully !</li>
   
   
      <li class="child">Restarting back the WebService.</li>
   

   </ul>

CSS

ul li {
		    list-style: none;
		    display: block;
		    width: 200px;
		    height: 45px;
		    /* border: 1px solid red; */
		    background-color: #6ad0d0;
		    text-align: center;
		    position: relative;
		    border-radius: 4%;
		    /* padding: 3px; */
		    margin: 13px;
		    line-height: 18px;
		}

		ul li.child {
		  right: -90px;
		  
		}