Multi dropdown in a downward tree structure - html

Question

I would like to create a multi dropdownlist which always will display downwards. I am able to drop it to the side but how do i drop it only downwards? I have been searching the web for a while but i can't find a simple solution for this.
I am using Angular 5 as my language, so maybe there are some methods in angular i can use?
To illustrate what i mean look at the picture below.
This is a copy of my working code which goes sideways, and as we can see there are a lot of submenues and that is why a treestructure which goes downwards would be better to use in this case.
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
<div class="container">
<div class="row">
<div class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html">
Top folder
<span class="caret"></span>
</a>
<ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Build Verification</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
Daily (Commit)
<ul class="dropdown-menu">
<li class="dropdown-submenu">
Data Processing
<ul class="dropdown-menu">
<li class="dropdown-submenu">
Toolbar
<ul class="dropdown-menu">
<li>
Project Browser
</li>
<li>
Hardware Browser
</li>
<li>
Monitor
</li>
<li>
Data Search
</li>
<li>
Meta Data
</li>
</ul>
</li>
<li class="dropdown-submenu">
Tasks
<ul class="dropdown-menu">
<li class="dropdown-submenu">
Setup
<ul class="dropdown-menu">
<li>
Hammer
</li>
<li>
Manger
</li>
<li>
Shaker
</li>
<li>
DOFSetup
</li>
<li>
Analysis Setup
</li>
</ul>
</li>
<li class="dropdown-submenu">
Measurement
<ul class="dropdown-menu">
<li>
Standard Measurement
</li>
</ul>
</li>
<li class="dropdown-submenu">
Processing
<ul class="dropdown-menu">
<li>
Time Data Review
</li>
<li>
Standard Processing
</li>
<li>
Time Editor
</li>
</ul>
</li>
<li>
Analysis
</li>
</ul>
</li>
</ul>
</li>
<li>
Hardware Setup
</li>
<li>
Data Viewer
</li>
<li>
Array Analysis
</li>
<li>
ODS Analysis
</li>
<li>
Shock Response Analysis
</li>
<li>
Angle Domain Analysis
</li>
<li>
Modal Analysis
</li>
<li>
Correlation Analysis
</li>
<li>
Data Recorder
</li>
</ul>
</li>
<li>
CI
</li>
</ul>
</li>
<li>
Deploy (Install)
</li>
<li>
Front-end Setup
</li>
<li>
Correlation Analysis
</li>
<li>
Laser
</li>
<li>
Model Analysis
</li>
<li>
Angle Domain Analysis
</li>
<li>
Shock Response Analysis
</li>
<li>
ODS Analysis
</li>
<li>
Array Analysis
</li>
<li>
Data Processing
</li>
<li>
Frontends
</li>
<li>
Data Recorder
</li>
<li>
Container
</li>
<li>
Data Viewer
</li>
<li>
Hardware
</li>
<li>
Test Environment
</li>
</ul>
</div>
</div>
</div>

Answer 1

Do you mean to achieve such downwards?
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
margin-left: -32px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
display:none;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html">
Top folder
<span class="caret"></span>
</a>
<ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Build Verification</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
Daily (Commit)
<ul class="dropdown-menu">
<li class="dropdown-submenu">
Data Processing
<ul class="dropdown-menu">
<li class="dropdown-submenu">
Toolbar
<ul class="dropdown-menu">
<li>
Project Browser
</li>
<li>
Hardware Browser
</li>
<li>
Monitor
</li>
<li>
Data Search
</li>
<li>
Meta Data
</li>
</ul>
</li>
<li class="dropdown-submenu">
Tasks
<ul class="dropdown-menu">
<li class="dropdown-submenu">
Setup
<ul class="dropdown-menu">
<li>
Hammer
</li>
<li>
Manger
</li>
<li>
Shaker
</li>
<li>
DOFSetup
</li>
<li>
Analysis Setup
</li>
</ul>
</li>
<li class="dropdown-submenu">
Measurement
<ul class="dropdown-menu">
<li>
Standard Measurement
</li>
</ul>
</li>
<li class="dropdown-submenu">
Processing
<ul class="dropdown-menu">
<li>
Time Data Review
</li>
<li>
Standard Processing
</li>
<li>
Time Editor
</li>
</ul>
</li>
<li>
Analysis
</li>
</ul>
</li>
</ul>
</li>
<li>
Hardware Setup
</li>
<li>
Data Viewer
</li>
<li>
Array Analysis
</li>
<li>
ODS Analysis
</li>
<li>
Shock Response Analysis
</li>
<li>
Angle Domain Analysis
</li>
<li>
Modal Analysis
</li>
<li>
Correlation Analysis
</li>
<li>
Data Recorder
</li>
</ul>
</li>
<li>
CI
</li>
</ul>
</li>
<li>
Deploy (Install)
</li>
<li>
Front-end Setup
</li>
<li>
Correlation Analysis
</li>
<li>
Laser
</li>
<li>
Model Analysis
</li>
<li>
Angle Domain Analysis
</li>
<li>
Shock Response Analysis
</li>
<li>
ODS Analysis
</li>
<li>
Array Analysis
</li>
<li>
Data Processing
</li>
<li>
Frontends
</li>
<li>
Data Recorder
</li>
<li>
Container
</li>
<li>
Data Viewer
</li>
<li>
Hardware
</li>
<li>
Test Environment
</li>
</ul>
</div>
</div>
</div>