how to create sub menu in left side bar - html

Question

i am new to HTML and i need to put some sub menus in my side bar.. just like a dropdown but it opens on the right side. and how can i put links on it. thanks
html
<ul>
<li></br>
<a class="active" href="?">HOME</a>
</li>
<li></br>
Manage Users ----> needs the dropdown here
</li>
<li></br>
Manage Employees----> needs the dropdown here
</li>
<li></br>
Search
</li>
<li></br>
Log-Out
</li>
</ul>
here is my css.
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 15%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 0 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
...................................................................

Answer 1

<ul>
<li></br>
<a class="active" href="?">HOME</a>
</li>
<li></br>
Manage Users ----> needs the dropdown here
</li>
<li></br>
Manage Employees---->
<ul>
<li> You put the sublists here</li>
<li> Many has you need</li>
</ul>
</li>
<li></br>
Search
</li>
<li></br>
Log-Out
</li>

Answer 2

You don't need the </br> (correct would be <br/>, or <br>for HTML5). I tried to make a simple solution with jQuery. where you simply display or not the content you want.
Hope it is what you were looking for.
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
/*width: 15%;*/
background-color: #f1f1f1;
/*position: fixed;*/
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 0 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<a class="active" href="#">HOME</a>
</li>
<li>
Manage Users
<ul id="contentUsers" style="display: none;">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li>
Manage Employees
<ul id="contentEmployees" style="display: none;">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li>
Search
</li>
<li>
Log-Out
</li>
</ul>