I'm having difficulty trying to replicate the first-level (director) box with a vertical line in between. The original chart only has one level with subs below.
Take a look at the image provided to see the desired outcome...
You can find the CodePen link to the original organization chart here: http://codepen.io/siiron/pen/aLkdE
Below is the CSS code:
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
}
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
...
.department.dep-e a{ background: #f0f0f0; }
And here is the corresponding HTML structure:
<div class="content">
<h1>Responsive Organization Chart</h1>
<figure class="org-chart cf">
<ul class="administration">
<li>
<ul class="director">
<li>
<a href="#"><span>Director</span></a>
<ul class="subdirector">
...
</ul>
</li>
</ul>
</li>
</ul>
</figure>
</div>