<ul class="tree">
  <li class="tree-node">
    <div class="tree-content">Nervous system</div>
    <ul class="tree-branch">
      <li class="tree-node">
        <select class="tree-content" name="select-1" aria-labelledby="select-label">
          <option value="1">Peripheral nervous system</option>
          <option value="2">Somatic nervous system</option>
          <option value="3">Autonomic nervous system</option>
          <option value="4">Parasympathetic nervous system</option>
          <option value="5">Central nervous system</option>
        </select>
        <ul class="tree-branch">
          <li class="tree-node">
            <div class="tree-content">Brain</div>
          </li>
          <li class="tree-node">
            <div class="tree-content">Spinal cord</div>
          </li>
        </ul>
      </li>
      <li class="tree-node">
        <select class="tree-content" name="select-2" aria-labelledby="select-label">
          <option>Peripheral nervous system</option>
          <option>Somatic nervous system</option>
          <option>Autonomic nervous system</option>
          <option>Parasympathetic nervous system</option>
          <option>Central nervous system</option>
        </select>
        <ul class="tree-branch">
          <li class="tree-node">
            <select class="tree-content" name="select-3" aria-labelledby="select-label">
              <option>Peripheral nervous system</option>
              <option>Somatic nervous system</option>
              <option>Autonomic nervous system</option>
              <option>Parasympathetic nervous system</option>
              <option>Central nervous system</option>
            </select>
            <ul class="tree-branch">
              <li class="tree-node">
                <div class="tree-content">Skin, muscles, and joints send signals to the spinal cord and brain.</div>
              </li>
              <li class="tree-node">
                <div class="tree-content">Brain and spinal cord send signals to the muscles, joints, and skin.</div>
              </li>
            </ul>
          </li>
          <li class="tree-node">
            <select class="tree-content" name="select-4" aria-labelledby="select-label">
              <option>Peripheral nervous system</option>
              <option>Somatic nervous system</option>
              <option>Autonomic nervous system</option>
              <option>Parasympathetic nervous system</option>
              <option>Central nervous system</option>
            </select>
            <ul class="tree-branch">
              <li class="tree-node">
                <div class="tree-content">Glands and internal organs send signals to the spinal cord and brain.</div>
              </li>
              <li class="tree-node">
                <div class="tree-content">Brain and spinal cord send signals to the glands and internal organs.</div>
                <ul class="tree-branch">
                  <li class="tree-node">
                    <div class="tree-content">Sympathetic</div>
                  </li>
                  <li class="tree-node">
                    <select class="tree-content" name="select-5" aria-labelledby="select-label">
                      <option>Peripheral nervous system</option>
                      <option>Somatic nervous system</option>
                      <option>Autonomic nervous system</option>
                      <option>Parasympathetic nervous system</option>
                      <option>Central nervous system</option>
                    </select>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
<div class="sr-only" id="select-label">Choose the best option based on parent and child items</div>

$white: #fff;
$connector-color: #aaa;
$active-color: rgb(200, 228, 248);
$focus-color: rgb(120, 178, 252);

$connector-color-active: darken($active-color, 20%);
$focus-shadow: 0 0 1px 3px rgba($focus-color, 0.65);

$node-gutter: 0.5rem;
$node-max-width: 9em;
$connector-y: 1rem;
$connector-radius: 0.25rem;
$content-padding-x: 0.5rem;
$content-padding-y: 0.5rem;

$duration-simple: 100ms;
$easing-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
$transition-default: $duration-simple $easing-standard;

.tree-branch,
.tree-node {
  position: relative;
  list-style-type: none;
}

.tree-branch {
  padding-left: 0;
  padding-top: $connector-y;
}

.tree-node {
  float: left;
  text-align: center;
  padding-top: $connector-y;
  padding-right: $node-gutter;
}

/*We will use ::before and ::after to draw the connectors*/

.tree-node::before,
.tree-node::after {
  content: '';
  position: absolute;
  top: 0;
  right: 50%;
  border-top: 1px solid $connector-color;
  width: 50%;
  height: $connector-y;
  transition: border-color $transition-default;
}

.tree-node::after {
  right: auto;
  left: 50%;
  border-left: 1px solid $connector-color;
}

/* Remove space from the top of single children */
.tree-node:only-child {
  padding-top: 0;
}

/* Remove connectors from elements without 
any siblings */
.tree-branch,
.tree-node {
  &:only-child::after,
  &:only-child::before {
    display: none;
  }
}

/* Remove left connector from first child and 
right connector from last child */
.tree-node:first-child::before,
.tree-node:last-child::after {
  border: none;
}

.tree-node:last-child {
  padding-right: 0;
}

/* Adding back the vertical connector to the last nodes */
.tree-node:last-child::before {
  border-right: 1px solid $connector-color;
  border-top-right-radius: $connector-radius;
}

.tree-node:first-child::after {
  border-top-left-radius: $connector-radius;
}

/* Time to add downward connectors from parents */
.tree-branch::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  border-left: 1px solid $connector-color;
  width: 0;
  height: $connector-y;
}

.tree-content {
  display: inline-block;
  background-color: transparent;
  border: 1px solid $connector-color;
  padding: $content-padding-y $content-padding-x;

  border-radius: $connector-radius;

  transition: border-color $transition-default, background-color $transition-default;
}

/*We will apply the hover effect the the lineage of the element also*/
.tree-content:hover,
.tree-content:hover + .tree-branch .tree-content,
.tree-content:focus,
.tree-content:focus + .tree-branch .tree-content {
  background-color: $active-color;
  border: 1px solid $connector-color-active;
  option {
    background-color: $white;
  }
}

.tree-content:hover + .tree-branch,
.tree-content:focus + .tree-branch {
  &::before,
  &::after {
    border-color: $connector-color-active;
  }

  .tree-branch,
  .tree-node {
    &::before,
    &::after {
      border-color: $connector-color-active;
    }
  }
}

.tree-content:focus {
  outline: none;
  box-shadow: $focus-shadow;
}

.tree-content {
  max-width: $node-max-width;
}

/* Bootstrap's screen-reader-only class */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

document.addEventListener('DOMContentLoaded', () => {
  // selects should be empty on load
  document.querySelectorAll('select').forEach((select) => {
    select.selectedIndex = -1;
  });
});