Menu
I have to Four list. I want to display them in side by side. First Row Doctor and patient side by side second pharma Company and employee etc. In my code, this is not working properly.
.tree li {
margin: 0px 0;
list-style-type: none;
position: relative;
padding: 20px 5px 0px 5px;
}
.tree li::before {
content: '';
position: absolute;
top: 0;
width: 1px;
height: 100%;
right: auto;
left: -20px;
border-left: 1px solid #ccc;
bottom: 50px;
}
.tree li::after {
content: '';
position: absolute;
top: 30px;
width: 35px;
height: 20px;
right: auto;
left: -20px;
border-top: 1px solid #ccc;
}
.tree li a {
display: inline-block;
border: 1px solid #ccc;
padding: 5px 10px;
text-decoration: none;
color: #666;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: 600;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
margin-left: 9px;
}
.tree li a label {
margin-left: 20px;
margin-top: -20px;
}
/*Remove connectors before root*/
.tree>ul>li::before,
.tree>ul>li::after {
border: 0;
}
/*Remove connectors after last child*/
.tree li:last-child::before {
height: 30px;
}
/*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: #dd4814;
color: #ffffff;
border: 1px solid #dd4814;
}
/*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: #dd4814;
}
.tree-checkbox {
margin: 4px !important;
}
.tree:before {
border-left: 1px solid #ccc;
bottom: 16px;
content: "";
display: block;
left: 0;
position: absolute;
top: -21px;
width: 1px;
z-index: 1;
}
.tree ul:after {
border-top: 1px solid #ccc;
content: "";
height: 20px;
left: -29px;
position: absolute;
right: auto;
top: 30px;
width: 42px;
}
*:before,
*:after {
box-sizing: border-box;
}
*:before,
*:after {
box-sizing: border-box;
}
.tree {
overflow: auto;
padding-left: 0px;
position: relative;
}<div class="col-lg-12">
<div class="row">
<div class="col-md-6">
<div class="dd tree" id="nestable" style="background: #eceff4; padding: 6px;">
<ul id="tree" class="dd-list">
<li class="dd-item">
<a href="#">
<input data-val="true" data-val-required="The IsChecked field is required." id="1" name="DomainViews[0].IsChecked" type="checkbox" value="true" /><input name="DomainViews[0].IsChecked" type="hidden" value="false" />
<label for="1">Doctor</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="2">
<label for="2"> Level 2 - 1</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="3">
<label for="3"> Level 3 - 1</label>
</a>
</li>
<li class="dd-item">
<a href="#">
<input type="checkbox" id="4">
<label for="4"> Level 3 - 2</label>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="dd-item">
<a href="#">
<input data-val="true" data-val-required="The IsChecked field is required." id="2" name="DomainViews[1].IsChecked" type="checkbox" value="true" /><input name="DomainViews[1].IsChecked" type="hidden" value="false" />
<label for="2">Patient</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="2">
<label for="2"> Level 2 - 1</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="3">
<label for="3"> Level 3 - 1</label>
</a>
</li>
<li class="dd-item">
<a href="#">
<input type="checkbox" id="4">
<label for="4"> Level 3 - 2</label>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="dd-item">
<a href="#">
<input data-val="true" data-val-required="The IsChecked field is required." id="3" name="DomainViews[2].IsChecked" type="checkbox" value="true" /><input name="DomainViews[2].IsChecked" type="hidden" value="false" />
<label for="3">Pharma Company</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="2">
<label for="2"> Level 2 - 1</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="3">
<label for="3"> Level 3 - 1</label>
</a>
</li>
<li class="dd-item">
<a href="#">
<input type="checkbox" id="4">
<label for="4"> Level 3 - 2</label>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="dd-item">
<a href="#">
<input data-val="true" data-val-required="The IsChecked field is required." id="4" name="DomainViews[3].IsChecked" type="checkbox" value="true" /><input name="DomainViews[3].IsChecked" type="hidden" value="false" />
<label for="4">Employee</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="2">
<label for="2"> Level 2 - 1</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="3">
<label for="3"> Level 3 - 1</label>
</a>
</li>
<li class="dd-item">
<a href="#">
<input type="checkbox" id="4">
<label for="4"> Level 3 - 2</label>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="dd-item">
<a href="#">
<input data-val="true" data-val-required="The IsChecked field is required." id="5" name="DomainViews[4].IsChecked" type="checkbox" value="true" /><input name="DomainViews[4].IsChecked" type="hidden" value="false" />
<label for="5">Hospital</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="2">
<label for="2"> Level 2 - 1</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="3">
<label for="3"> Level 3 - 1</label>
</a>
</li>
<li class="dd-item">
<a href="#">
<input type="checkbox" id="4">
<label for="4"> Level 3 - 2</label>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="dd-item">
<a href="#">
<input data-val="true" data-val-required="The IsChecked field is required." id="6" name="DomainViews[5].IsChecked" type="checkbox" value="true" /><input name="DomainViews[5].IsChecked" type="hidden" value="false" />
<label for="6">Insurance Company</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="2">
<label for="2"> Level 2 - 1</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="3">
<label for="3"> Level 3 - 1</label>
</a>
</li>
<li class="dd-item">
<a href="#">
<input type="checkbox" id="4">
<label for="4"> Level 3 - 2</label>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>Like this:
1. Doctor patient 2. Pharma Company Employee
907
Just add this css rules:
.tree > ul > li {
display: inline-block;
background-color: #666;
margin: 0 20px 20px 0;
padding-bottom: 20px;
}
.tree > ul > li:nth-child(odd) {
float: left;
}
.tree > ul > li a {
color: #fff;
}
.tree >ul > li:nth-child(odd) {
float: left;
}
.tree >ul > li {
display: inline-block;
background-color: #666;
margin: 0 20px 20px 0;
padding-bottom: 20px;
}
.tree >ul > li a {
color: #fff;
}
.tree li {
margin: 0px 0;
list-style-type: none;
position: relative;
padding: 20px 5px 0px 5px;
}
.tree li::before {
content: '';
position: absolute;
top: 0;
width: 1px;
height: 100%;
right: auto;
left: -20px;
border-left: 1px solid #ccc;
bottom: 50px;
}
.tree li::after {
content: '';
position: absolute;
top: 30px;
width: 35px;
height: 20px;
right: auto;
left: -20px;
border-top: 1px solid #ccc;
}
.tree li a {
display: inline-block;
border: 1px solid #ccc;
padding: 5px 10px;
text-decoration: none;
color: #666;
font-family: 'Open Sans',sans-serif;
font-size: 14px;
font-weight: 600;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
margin-left: 9px;
}
.tree li a label {
margin-left: 20px;
margin-top: -20px;
}
/*Remove connectors before root*/
.tree > ul > li::before, .tree > ul > li::after {
border: 0;
}
/*Remove connectors after last child*/
.tree li:last-child::before {
height: 30px;
}
/*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: #dd4814;
color: #ffffff;
border: 1px solid #dd4814;
}
/*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: #dd4814;
}
.tree-checkbox {
margin: 4px !important;
}
.tree:before {
border-left: 1px solid #ccc;
bottom: 16px;
content: "";
display: block;
left: 0;
position: absolute;
top: -21px;
width: 1px;
z-index: 1;
}
.tree ul:after {
border-top: 1px solid #ccc;
content: "";
height: 20px;
left: -29px;
position: absolute;
right: auto;
top: 30px;
width: 42px;
}
*:before, *:after {
box-sizing: border-box;
}
*:before, *:after {
box-sizing: border-box;
}
.tree {
overflow: auto;
padding-left: 0px;
position: relative;
}<div class="col-lg-12">
<div class="row">
<div class="col-md-6">
<div class="dd tree" id="nestable" style="background: #eceff4; padding: 6px;">
<ul id="tree" class="dd-list">
<li class="dd-item">
<a href="#">
<input data-val="true" data-val-required="The IsChecked field is required." id="1" name="DomainViews[0].IsChecked" type="checkbox" value="true" />
<input name="DomainViews[0].IsChecked" type="hidden" value="false" />
<label for="1">Doctor</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="2">
<label for="2"> Level 2 - 1</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="3">
<label for="3"> Level 3 - 1</label>
</a>
</li>
<li class="dd-item">
<a href="#">
<input type="checkbox" id="4">
<label for="4"> Level 3 - 2</label>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="dd-item">
<a href="#">
<input data-val="true" data-val-required="The IsChecked field is required." id="2" name="DomainViews[1].IsChecked" type="checkbox" value="true" />
<input name="DomainViews[1].IsChecked" type="hidden" value="false" />
<label for="2">Patient</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="2">
<label for="2"> Level 2 - 1</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="3">
<label for="3"> Level 3 - 1</label>
</a>
</li>
<li class="dd-item">
<a href="#">
<input type="checkbox" id="4">
<label for="4"> Level 3 - 2</label>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="dd-item">
<a href="#">
<input data-val="true" data-val-required="The IsChecked field is required." id="3" name="DomainViews[2].IsChecked" type="checkbox" value="true" />
<input name="DomainViews[2].IsChecked" type="hidden" value="false" />
<label for="3">Pharma Company</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="2">
<label for="2"> Level 2 - 1</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="3">
<label for="3"> Level 3 - 1</label>
</a>
</li>
<li class="dd-item">
<a href="#">
<input type="checkbox" id="4">
<label for="4"> Level 3 - 2</label>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="dd-item">
<a href="#">
<input data-val="true" data-val-required="The IsChecked field is required." id="4" name="DomainViews[3].IsChecked" type="checkbox" value="true" />
<input name="DomainViews[3].IsChecked" type="hidden" value="false" />
<label for="4">Employee</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="2">
<label for="2"> Level 2 - 1</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="3">
<label for="3"> Level 3 - 1</label>
</a>
</li>
<li class="dd-item">
<a href="#">
<input type="checkbox" id="4">
<label for="4"> Level 3 - 2</label>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="dd-item">
<a href="#">
<input data-val="true" data-val-required="The IsChecked field is required." id="5" name="DomainViews[4].IsChecked" type="checkbox" value="true" />
<input name="DomainViews[4].IsChecked" type="hidden" value="false" />
<label for="5">Hospital</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="2">
<label for="2"> Level 2 - 1</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="3">
<label for="3"> Level 3 - 1</label>
</a>
</li>
<li class="dd-item">
<a href="#">
<input type="checkbox" id="4">
<label for="4"> Level 3 - 2</label>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="dd-item">
<a href="#">
<input data-val="true" data-val-required="The IsChecked field is required." id="6" name="DomainViews[5].IsChecked" type="checkbox" value="true" />
<input name="DomainViews[5].IsChecked" type="hidden" value="false" />
<label for="6">Insurance Company</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="2">
<label for="2"> Level 2 - 1</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="3">
<label for="3"> Level 3 - 1</label>
</a>
</li>
<li class="dd-item">
<a href="#">
<input type="checkbox" id="4">
<label for="4"> Level 3 - 2</label>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
answered Dec 11 '25 07:12
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With