为菜单和子菜单更改 CSS

Question

我正在 opencart 3.0 中为我的商店创建一个三级菜单，整个编程部分我已经完成，在这里得到你的帮助。现在，我在调整 CSS 时遇到了麻烦，因为我需要层叠显示的菜单，但是 opencart 菜单默认不会层叠，它是一次性打开的，如下例所示。

我需要留下这样的东西。

我的 menu.twig 中的代码如下所示：

{% if categories %}
<div class="container">
  <nav id="menu" class="navbar">
    <div class="navbar-header"><span id="category" class="visible-xs">{{ text_category }}</span>
      <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
    </div>
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav">
        {% for category in categories %}
        {% if category.children %}
        <li class="dropdown"><a href="{{ category.href }}" class="dropdown-toggle" data-toggle="dropdown"><b>
          <div style="font-size: 15px;">{{ category.name }}</div>
          </b></a>
          <div class="dropdown-menu">
            <div class="dropdown-inner"> {% for children in category.children|batch(category.children|length / category.column|round(1, 'ceil')) %}
              <ul class="list-unstyled">
                {% for child in children %}
                <li><a href="{{ child.href }}">{{ child.name }}</a> 

                   // begin changes
                  <ul class="dropdown-menu sub-menu dropdown-inner">
                    {% set children2 = child.children2 %}
                    {% for child2 in children2 %}
                    <li> <a href="{{ child2.href }}" >{{ child2.name }}</a> </li>
                    {% endfor %}
                  </ul>
                  // end changes 
                </li>
                {% endfor %}
              </ul>
              {% endfor %} </div>
            <a href="{{ category.href }}" class="see-all">{{ text_all }} {{ category.name }}</a> </div>
        </li>
        {% else %}
        <li><a href="{{ category.href }}">{{ category.name }}</a></li>
        {% endif %}
        {% endfor %}
      </ul>
    </div>
  </nav>
</div>
{% endif %}

Opencart 3.0 已经有 CSS 类了吗？如何制作？

Answer 1

在此文件中：

catalog/view/theme/default/stylesheet/stylesheet.css

查找：

#menu .dropdown:hover .dropdown-menu {
    display: block;
}

替换为：

#menu .dropdown:hover > .dropdown-menu {
    display: block;
}
#menu ul ul ul.dropdown-inner {
  left: 100%;
  top: 0;
  display: none;
}
#menu .nav li {
  position: relative;
}
#menu ul ul li:hover ul.dropdown-inner {
  display: block;
}

为菜单和子菜单更改 CSS

Change CSS for menu and submenu

html

css

opencart

opencart-3