Here is my .html code :
{% 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><a href="{% url "customers:perceptions" cust=customer.pk %}" class="unselectable" data-turbolinks="false">{% trans "Perceptions" %}</a></li>
<li><a href="{% url "customers:profile" cust=customer.pk %}" class="unselectable" data-turbolinks="false">{% trans "Profile" %}</a></li>
<li><a href="{% url "customers:alerts_index" cust=customer.pk %}" class="unselectable" data-turbolinks="false">{% trans "Alerts" %}</a></li>
<li><a href="{% url "customers:messaging" cust=customer.pk %}" class="unselectable" data-turbolinks="false">{% trans "Messaging" %}</a></li>
<li><a href="{% url "customers:requests" cust=customer.pk %}" class="unselectable" data-turbolinks="false">{% trans "Requests" %}</a></li>
<li><a href="{% url "customers:documents" cust=customer.pk %}" class="unselectable" data-turbolinks="false">{% trans "Documents" %}</a></li>
<li><a href="{% url "customers:logs" cust=customer.pk %}" class="unselectable" data-turbolinks="false">{% trans "Logs" %}</a></li>
<li class="separator"></li>
<li><a href="{% url "customers:loan" cust=customer.pk pk=loan.pk%}" class="unselectable" data-turbolinks="false">{% trans "Loan" %}</a></li>
<li><a href="#"># Loan </a>
<ul>
<li><a>{% trans "Perceptions" %}</a></li>
<li><a>{% trans "Perceptions" %}</a></li>
<li><a>{% trans "Perceptions" %}</a></li>
</ul>
</li>
<li class="separator"></li>
{% if customer.phone_1 %}
<li class="phone">{{ customer.phone_1 }}</li>
{% endif %}
<li><a href="mailto:{{ user.email }}" data-turbolinks="false"><i class="material-icons">email</i> {{ user.email }}</a></li>
<li><a href="{% url "customers:print" cust=customer.pk %}" class="unselectable" data-turbolinks="false" target="_blank"><i class="material-icons">printer</i> {% trans "Print" %}</a></li>
</ul>
</div>
I wish to create a multi-level dropdown menu using this code (e.g., ).
However, I am facing issues with the CSS styling. Currently, the submenu appears in front of the main menu rather than on the right side. Here is an image of the current layout: Picture. How can I resolve this problem?
Thank you in advance!
P.S. Please inform me if the question lacks clarity.
.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; }
/* More CSS styles follow... */