Question

这是我的.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><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>

我希望使用此代码获取多级下拉菜单（例如http://red-team-design.com/dist/uploads/2011/03/css3-multi-level-dropdown-menu.png）。

我只是不知道如何解决我的css代码问题。以下是我到目前为止在图片中获得的内容：Picture。子菜单位于主菜单的前面，而它应位于右侧。我怎么能解决这个问题？

提前致谢！

P.S。如果问题不清楚，请告诉我。

.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

理想情况下，隔离问题的完整工作代码段是最好的，但考虑到情况并非如此，我将与所需的行为共享一个基本示例，这应该非常简单地进行集成。

.main {
  width: 200px;
  height: 40px;
  background: lightgray;
  position: relative;
}

.main:hover .sub {
  display: block;
}

.sub {
  width: 200px;
  height: 40px;
  background: gainsboro;
  position: relative;
  display: none;
}

.sub:hover .sub2 {
  display: block;
}

.sub2 {
  width: 200px;
  height: 40px;
  background: gray;
  position: relative;
  top: -18px;
  left: 200px;
  display: none;
}

<div class="main">
  main menu
  <div class="sub">
    first sub menu
    <div class="sub2">
      right sub menu
    </div>
  </div>
</div>

Answer 2

正如所有菜单＆＃34; ul＆＃34;元素位于＆＃34; absolute＆＃34;，如果您不希望它们与父母重叠，则需要在子菜单中添加与第一级链接宽度大小相同的偏移量：

.customer-context-menu ul ul { left: 300px; }

Answer 3

这是我上次用于类似情况的片段。也许它会很有用。

// its clear and well commented code

https://jsfiddle.net/csswizardry/Zj4eb/

子菜单位于主菜单的前面

3 个答案: