Dropdown menu not showing up - html

Question

I have been looking at multiple stackoverflow questions about how to get a dropdown menu working, but so far none of them solved the problem. I have a navigation list with a couple of links in it and would like to have a hover option on one of them that would drop down a more specific list of options.
Here is the HTML of the list:
<div id="leftMenu" ng-if="loggedin">
<li>Koti</li>
<li>Jäsentiedot</li>
<li>
<div class="dropdown">
Asukastiedot
<ul class="dropdown-content" role="menu">
<li>Kaste</li>
</ul>
</div>
</li>
<li>Raportointi</li>
<li>Toiminnot</li>
<li>Admin</li>
</div>
Here is my CSS:
.dropdown {
width: auto;
display: inline-block;
position: relative;
padding: 0px;
margin: -1px;
}
.dropdown-content {
position: absolute;
width:auto;
z-index:1000;
display: block;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block; margin-top: 0;}
Thanks in advance for your help on this problem!

Answer 1

.sub {
display: none;
}
.main > li:hover .sub {
display: block;
}
<ul class="main">
<li>a
<ul class="sub">
<li>a1</li>
<li>a2</li>
<li>a3</li>
</ul>
</li>
<li>b
<ul class="sub">
<li>b1</li>
<li>b2</li>
<li>b3</li>
</ul>
</li>
<li >c
<ul class="sub">
<li>c1</li>
<li>c2</li>
<li>c3</li>
</ul>
</li>
</ul>