Convert list in chart vertically using css - html

Question

Hi i am working on an org chart where in i was successfully able to generate the whole tree. Now my concern is how can i convert a group of list elements to display vertically instead of horizontal display.
My code for the org chart is as follows:
* {
margin: 0;
padding: 0;
}
.tree ul {
padding-top: 50px;
position: relative;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
.tree li {
float: left;
text-align: center;
list-style-type: none;
position: relative;
padding: 40px 5px 0 5px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
/*We will use ::before and ::after to draw the connectors*/
.tree li::before,
.tree li::after {
content: '';
position: absolute;
top: 0;
right: 50%;
border-top: 2px solid #3f3974;
width: 50%;
height: 40px;
}
.tree li::after {
right: auto;
left: 50%;
border-left: 2px solid #3f3974;
}
/*We need to remove left-right connectors from elements without
any siblings*/
.tree li:only-child::after,
.tree li:only-child::before {
display: none;
}
/*Remove space from the top of single children*/
.tree li:only-child {
padding-top: 0;
}
/*Remove left connector from first child and
right connector from last child*/
.tree li:first-child::before,
.tree li:last-child::after {
border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before {
border-right: 2px solid #3f3974;
border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
}
.tree li:first-child::after {
border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
}
/*Time to add downward connectors from parents*/
.tree ul ul::before {
content: '';
position: absolute;
top: 0;
left: 50%;
border-left: 2px solid #3f3974;
width: 0;
height: 50px;
}
.tree li a {
border: 1px solid #ccc;
padding: 5px 10px;
text-decoration: none;
color: #666;
font-family: arial, verdana, tahoma;
font-size: medium;
font-weight: bolder;
display: inline-block;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
width: 10em;
word-break: break-word;
white-space: pre-wrap;
}
.tree li a~.tree li a {
/* Undo last assignment */
word-spacing: unset;
display: table-caption;
}
/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover,
.tree li a:hover+ul li a {
/* background: #c8e4f8; */
color: #000;
border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
.tree li a:hover+ul li::after,
.tree li a:hover+ul li::before,
.tree li a:hover+ul::before,
.tree li a:hover+ul ul::before {
border-color: #94a0b4;
}
.tree ul.sections {
margin-top: -20px;
}
.tree ul.sections li.section {
padding-left: 25px;
border-bottom: 2px solid orange;
height: 80px;
}
.tree ul.sections li.section a {
background: #92D4A8;
top: 38px;
position: absolute;
z-index: 1;
width: 95%;
height: auto;
vertical-align: middle;
right: 0px;
line-height: 14px;
}
a[class^='level1_'] {
background: rgb(248, 80, 50);
/* Old browsers */
background: -moz-linear-gradient(45deg, rgba(248, 80, 50, 1) 0%, rgba(246, 41, 12, 1) 18%, rgba(246, 41, 12, 1) 18%, rgba(246, 41, 12, 1) 21%, rgba(246, 41, 12, 1) 25%, rgba(240, 47, 23, 1) 43%, rgba(241, 111, 92, 1) 61%, rgba(231, 56, 39, 1) 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(45deg, rgba(248, 80, 50, 1) 0%, rgba(246, 41, 12, 1) 18%, rgba(246, 41, 12, 1) 18%, rgba(246, 41, 12, 1) 21%, rgba(246, 41, 12, 1) 25%, rgba(240, 47, 23, 1) 43%, rgba(241, 111, 92, 1) 61%, rgba(231, 56, 39, 1) 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg, rgba(248, 80, 50, 1) 0%, rgba(246, 41, 12, 1) 18%, rgba(246, 41, 12, 1) 18%, rgba(246, 41, 12, 1) 21%, rgba(246, 41, 12, 1) 25%, rgba(240, 47, 23, 1) 43%, rgba(241, 111, 92, 1) 61%, rgba(231, 56, 39, 1) 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827', GradientType=1);
/* IE6-9 fallback on horizontal gradient */
color: #f2f2f2 !important;
}
a[class^='level2_'] {
background: rgb(181, 189, 200);
/* Old browsers */
background: -moz-linear-gradient(45deg, rgba(181, 189, 200, 1) 22%, rgba(130, 140, 149, 1) 33%, rgba(40, 52, 59, 1) 59%, rgba(130, 140, 149, 1) 62%, rgba(40, 52, 59, 1) 73%);
/* FF3.6-15 */
background: -webkit-linear-gradient(45deg, rgba(181, 189, 200, 1) 22%, rgba(130, 140, 149, 1) 33%, rgba(40, 52, 59, 1) 59%, rgba(130, 140, 149, 1) 62%, rgba(40, 52, 59, 1) 73%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg, rgba(181, 189, 200, 1) 22%, rgba(130, 140, 149, 1) 33%, rgba(40, 52, 59, 1) 59%, rgba(130, 140, 149, 1) 62%, rgba(40, 52, 59, 1) 73%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b', GradientType=1);
/* IE6-9 fallback on horizontal gradient */
color: #f2f2f2 !important;
}
a[class^='level3_'] {
background: rgb(157, 213, 58);
/* Old browsers */
background: -moz-linear-gradient(45deg, rgba(157, 213, 58, 1) 29%, rgba(161, 213, 79, 1) 38%, rgba(128, 194, 23, 1) 47%, rgba(157, 213, 58, 1) 63%, rgba(124, 188, 10, 1) 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(45deg, rgba(157, 213, 58, 1) 29%, rgba(161, 213, 79, 1) 38%, rgba(128, 194, 23, 1) 47%, rgba(157, 213, 58, 1) 63%, rgba(124, 188, 10, 1) 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg, rgba(157, 213, 58, 1) 29%, rgba(161, 213, 79, 1) 38%, rgba(128, 194, 23, 1) 47%, rgba(157, 213, 58, 1) 63%, rgba(124, 188, 10, 1) 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a', GradientType=1);
/* IE6-9 fallback on horizontal gradient */
color: #000 !important;
}
a[class^='level4_'] {
background: -moz-linear-gradient(45deg, rgba(30, 87, 153, 0) 0%, rgba(30, 87, 153, 1) 19%, rgba(30, 87, 153, 0.95) 20%, rgba(31, 92, 159, 0.8) 23%, rgba(41, 137, 216, 0.8) 50%, rgba(30, 87, 153, 0.8) 80%, rgba(30, 87, 153, 0.8) 81%, rgba(30, 87, 153, 0) 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(45deg, rgba(30, 87, 153, 0) 0%, rgba(30, 87, 153, 1) 19%, rgba(30, 87, 153, 0.95) 20%, rgba(31, 92, 159, 0.8) 23%, rgba(41, 137, 216, 0.8) 50%, rgba(30, 87, 153, 0.8) 80%, rgba(30, 87, 153, 0.8) 81%, rgba(30, 87, 153, 0) 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg, rgba(30, 87, 153, 0) 0%, rgba(30, 87, 153, 1) 19%, rgba(30, 87, 153, 0.95) 20%, rgba(31, 92, 159, 0.8) 23%, rgba(41, 137, 216, 0.8) 50%, rgba(30, 87, 153, 0.8) 80%, rgba(30, 87, 153, 0.8) 81%, rgba(30, 87, 153, 0) 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#001e5799', endColorstr='#001e5799', GradientType=1);
/* IE6-9 fallback on horizontal gradient */
color: #fff !important;
}
a[class^='level5_'] {
background: #6db3f2;
/* Old browsers */
background: -moz-linear-gradient(45deg, #6db3f2 39%, #6db3f2 39%, #54a3ee 40%, #3690f0 45%, #1e69de 69%);
/* FF3.6-15 */
background: -webkit-linear-gradient(45deg, #6db3f2 39%, #6db3f2 39%, #54a3ee 40%, #3690f0 45%, #1e69de 69%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg, #6db3f2 39%, #6db3f2 39%, #54a3ee 40%, #3690f0 45%, #1e69de 69%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de', GradientType=1);
/* IE6-9 fallback on horizontal gradient */
color: #fff !important;
width: 7em !important;
}
/*Thats all. I hope you enjoyed it.
Thanks :)*/
<section class="uRegion clearfix" id="newtree" style="overflow-x: scroll;">
<div class="uRegionContent clearfix" style="width: 4275px;">
<div class="tree">
<ul class="leve1">
<li class="level1">President
<ul class="level2">
<li class="level21">Direc1
<ul class="level3">
<li class="level3_3">CSD
<ul class="level4">
<li class="level4_8">MR Sec.</li>
<li class="level4_9">Insts Section
<ul class="level5 sections">
<li class="level5_2 section">Ip Unit</li>
<li class="level5_3 section">Sp Unit</li>
<li class="level5_4 section">QTS Unit</li>
</ul>
</li>
<li class="level4_10">Acc Section
<ul class="level5 sections">
<li class="level5_5 section">Acc Unit</li>
<li class="level5_6 section">Cust Bill Unit</li>
</ul>
</li>
<li class="level4_11">BC Sec.</li>
<li class="level4_12">Mtr Section
<ul class="level5 sections">
<li class="level5_7 section">Tech Supp AMI Unit</li>
<li class="level5_8 section">Mtr Inst Unit</li>
</ul>
</li>
<li class="level4_13">CC & CC Sec
<ul class="level5 sections">
<li class="level5_9 section">CC Unit</li>
<li class="level5_10 section">BOff Unit</li>
<li class="level5_11 section">Q & A Unit</li>
<li class="level5_12 section">CC Rep. Unit</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</section>
In the chart under sections i have some list elements aligned horizontally. Now i want to display align the li elements vertically as shown in the figure i.e.
I tried tweaking with the code by adding a new class other than the one already available but it didn't work out.

Answer 1

To list list's items vertically you don't have to do anything.
Lists are automatically vertical.
If you want to display them horizontally, you have to use property float: left;
.horizontal li {
float: left;
padding: 20px;
list-style-type: none;
}
<ul class="horizontal">
<li> one </li>
<li> two </li>
<li> three </li>
</ul>
As I can see in your code, you have float: left property added to each .tree li element. Just remove it from those elements that you don't want to be floated (and should be vertical), and add it only to those which have to be flated (and should be horizontal).