Another drop down menu - django

Question

Here is my .html file :
{% load i18n %}
<div class="customer-context-menu closed {% if customer.gender == 0 %}male{% else %}female{% endif %}">
<b class="unselectable">
{{ customer.icon }}
{{ user.get_full_name }}
</b>
<ul>
<li class="tip"></li>
<li>{% trans "Perceptions" %}</li>
<li>{% trans "Profile" %}</li>
<li>{% trans "Alerts" %}</li>
<li>{% trans "Messaging" %}</li>
<li>{% trans "Requests" %}</li>
<li>{% trans "Documents" %}</li>
<li>{% trans "Logs" %}</li>
<li class="separator"></li>
<li>{% trans "Loan" %}</li>
<li class="separator"></li>
{% if customer.phone_1 %}
<li class="phone">{{ customer.phone_1 }}</li>
{% endif %}
<li><i class="material-icons">email</i> {{ user.email }}</li>
<li><i class="material-icons">printer</i> {% trans "Print" %}</li>
</ul>
</div>
I would like it could give me the drop down menu I drew.
Here is the the result including my drawing : drawing
Could anyone have time to show me how I could do such thing here? An example of a drop down menu into another should be sufficient.
Thanks!
P.S. Please tell me if the question is unclear.
.customer-context-menu b {
display: inline-block;
border: 1px solid #ccc;
padding: 5px 14px 2px 7px;
font-size: 12px;
border-radius: 13px;
cursor: pointer;
white-space: nowrap; }
.customer-context-menu b .material-icons {
float: left;
margin: -3px 4px 0 -5px; }
.customer-context-menu .phone {
padding: 10px 10px !important;
font-size: 1.3em;
font-weight: normal; }
.customer-context-menu.female b {
border-color: #ffcbe5;
color: #ff65b1; }
.customer-context-menu.female:hover b {
background-color: #fff4f9; }
.customer-context-menu.female.open b {
background-color: #ff65b1;
color: white; }
.customer-context-menu.female.open i {
color: white; }
.customer-context-menu.female.open ul li a:hover {
color: #ff65b1; }
.customer-context-menu.female.open .separator {
background-color: #ff65b1; }
.customer-context-menu.male b {
border-color: #90bfea;
color: #3a8dda; }
.customer-context-menu.male:hover b {
background-color: #e6f0fa; }
.customer-context-menu.male.open b {
background-color: #3a8dda;
color: white; }
.customer-context-menu.male.open i {
color: white; }
.customer-context-menu.male.open ul li a:hover {
color: #3a8dda; }
.customer-context-menu.male.open .separator {
background-color: #3a8dda; }
.customer-context-menu ul {
position: absolute;
background: white;
border: 1px solid #ccc;
margin: 10px 0 0 -6px;
padding: 6px 0;
display: none;
box-shadow: 0px 5px 14px #999;
background-color: #f4f4f4 !important; }
.customer-context-menu ul li a {
display: block;
padding: 1px 10px;
min-width: 300px; }
.customer-context-menu ul li.tip:after {
top: -10px;
right: 50px;
bottom: auto;
left: auto;
border-width: 0 9px 9px;
border-color: #bbb transparent;
position: absolute;
width: 0;
display: block;
border-style: solid;
content: "";
left: 10px;
width: 0; }
.customer-context-menu.open b, .customer-context-menu.open ul {
background: #def; }
.customer-context-menu.open ul {
display: block; }
.customer-context-menu.open ul li {
border-bottom: 1px solid #eaeaea;
padding: 2px 0; }
.customer-context-menu.open ul li:last-child, .customer-context-menu.open ul li.tip, .customer-context-menu.open ul li.separator {
border: 0; }
.customer-context-menu.open ul li.separator {
padding: 4px; }
.customer-context-menu.open ul li a {
cursor: pointer; }
.customer-context-menu.open ul li a .material-icons {
color: #888;
font-size: 1.1em;
position: relative;
top: 4px;
color: inherit; }
.customer-context-menu.open ul li a:hover {
background-color: white; }

Answer 1

put another ul tag after the li tag where you want to get another dropdown. i guess you need some css rule after doing this