Django 另一个下拉菜单

这是我的

.html

文件：

{% 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><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 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>

---

将另一个ul标签放在li标签之后，您希望在其中获得另一个下拉列表。我想在完成此操作后，您需要一些css规则

您建议使用哪种css规则？@J.doe查找打开css的侧边下拉菜单。

.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; }