.items ul, .items li {
  margin: 0 auto;
  padding: 0;
  text-align: center;
  color: #000000;
  font-family: arial, sans-serif;
}

.items ul {
  padding-top: 20px;
  position: relative;
}

/* Make all children "inline" */
.items li {
  /*float: left;*/
  display: inline-block;
  text-align: center;
  list-style-type: none;
  position: relative;
  padding: 20px 5px 0 5px;
}

/* Add horizontal connector. Note: they are 2 pseudo-elements */
.items li::before, .items li::after {
  content: '';
  position: absolute;
  top: 0;
  right: 50%;
  width: 55%;
  height: 42px;
  z-index: -1;
  border-top: 2px solid #CCC;
}

.items li::after {
  border-left: 2px solid #CCC;
  left: 50%;
  right: auto;
}

/* Remove left and right connector from a single child */
.items li:only-child::after, .items li:only-child::before {
  display: none;
}

.items li:only-child {
  padding-top: 0;
}

/* Remove "outer" connector */
.items li:first-child::before, .items li:last-child::after {
  border: 0 none;
}
/* Add back the down connector for last node */
.items li:last-child::before {
  border-right: 2px solid #CCC;
  border-radius: 0 5px 0 0;
}

/* Add curve line to the first child's connector */
.items li:first-child::after {
  border-radius: 5px 0 0 0;
}


/* Add down connector from parent */
.items ul ul::before {
  content: '';
  border-left: 2px solid #CCC;
  z-index: -1;
  height: 20px;
  position: absolute;
  top: 0px;
  left: 50%;
  width: 0;
}

/* Add cosmetic for each item */
.items li a {
  font-size: 20px;
  font-weight:bold;
  color: #fff;
  background-color: #572B67;
  border: 2px solid #CCC;
  padding: 5px 10px;
  text-decoration: none;
  display: inline-block;
  border-radius: 7px;
}

/* Change bg-color while hovering each item */
.items li a:hover {
  background-color: #EEF;
  color: #572B67;
}

/* EXPERIMENTAL for multiple parents */
/* Add margin for the parents */
.items li a:not(:only-of-type) {
  position: relative;
  margin-bottom: 16px;
}

/* Add "down" connector (vertical line) from each multi-parent, EXCEPT the last one */
.items li > a:not(:last-of-type)::after{
  content: '';
  position: absolute;
  border-left: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
  top: 20px;
  width: 75%;
  height: 20px;
  left: 50%;
  z-index: -1;
}

/* Special case for the last multiple-parent, using border-right */
.items li > a:not(:only-of-type):last-of-type::after {
  content: '';
  position: absolute;
  border-right: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
  top: 20px;
  width: 50%;
  height: 20px;
  right: 50%;
  z-index: -1; 
  border-bottom-right-radius: 5px;
}

/* Give the curve line to the first multiple parent .... */
.items li > a:not(:only-of-type):first-child::after {
  border-bottom-left-radius: 5px;
}

/* The middle element of multi-parents*/
.items li > a:not(:first-child):not(:last-of-type)::before {
  content: '';
  position: absolute;
  border-bottom: 1px solid #CCC;
  top: 40px;
  width: 50%;
  right: 50%;
  z-index: -1;
}

.items ul:last-of-type li {
  padding-left: 0;
  padding-right: 0;
}

.itemsunlinked ul, .itemsunlinked li {
  margin: 0 auto;
  padding: 0;
  text-align: center;
  color: #000000;
  font-family: arial, sans-serif;
}

.itemsunlinked ul {
  padding-top: 20px;
  position: relative;
}

/* Make all children "inline" */
.itemsunlinked li {
  /*float: left;*/
  display: inline-block;
  text-align: center;
  list-style-type: none;
  position: relative;
  padding: 20px 50px 50px 50px;
}

/* Add horizontal connector. Note: they are 2 pseudo-elements */
.itemsunlinked li::before, .itemsunlinked li::after {
  content: '';
  position: absolute;
  top: 0;
  right: 50%;
  width: 55%;
  height: 42px;
  z-index: -1;
}

.itemsunlinked li::after {
  left: 50%;
  right: auto;
}

/* Remove left and right connector from a single child */
.itemsunlinked li:only-child::after, .itemsunlinked li:only-child::before {
  display: none;
}

.itemsunlinked li:only-child {
  padding-top: 0;
}

/* Remove "outer" connector */
.itemsunlinked li:first-child::before, .itemsunlinked li:last-child::after {
  border: 0 none;
}
/* Add back the down connector for last node */
.itemsunlinked li:last-child::before {
  border-radius: 0 5px 0 0;
}

/* Add curve line to the first child's connector */
.itemsunlinked li:first-child::after {
  border-radius: 5px 0 0 0;
}


/* Add down connector from parent */
.itemsunlinked ul ul::before {
  content: '';
  z-index: -1;
  height: 20px;
  position: absolute;
  top: 0px;
  left: 50%;
  width: 0;
}

/* Add cosmetic for each item */
.itemsunlinked li a {
  font-size: 20px;
  font-weight:bold;
  color: #fff;
  background-color: #CF0707;
  border: 2px solid #CCC;
  padding: 5px 10px;
  text-decoration: none;
  display: inline-block;
  border-radius: 7px;
  margin-right:50px;
  margin-left:50px;
}

/* Change bg-color while hovering each item */
.itemsunlinked li a:hover {
  background-color: #EEF;
  color: #CF0707;
}

/* EXPERIMENTAL for multiple parents */
/* Add margin for the parents */
.itemsunlinked li a:not(:only-of-type) {
  position: relative;
  margin-bottom: 16px;
}

/* Add "down" connector (vertical line) from each multi-parent, EXCEPT the last one */
.itemsunlinked li > a:not(:last-of-type)::after{
  content: '';
  position: absolute;
  top: 20px;
  width: 75%;
  height: 20px;
  left: 50%;
  z-index: -1;
}

/* Special case for the last multiple-parent, using border-right */
.itemsunlinked li > a:not(:only-of-type):last-of-type::after {
  content: '';
  position: absolute;
  top: 20px;
  width: 50%;
  height: 20px;
  right: 50%;
  z-index: -1; 
  border-bottom-right-radius: 5px;
}

/* Give the curve line to the first multiple parent .... */
.itemsunlinked li > a:not(:only-of-type):first-child::after {
  border-bottom-left-radius: 5px;
}

/* The middle element of multi-parents*/
.itemsunlinked li > a:not(:first-child):not(:last-of-type)::before {
  content: '';
  position: absolute;
  border-bottom: 1px solid #CCC;
  top: 40px;
  width: 50%;
  right: 50%;
  z-index: -1;
}

.itemsunlinked ul:last-of-type li {
  padding-left: 0;
  padding-right: 0;
}