Liferay 7.3多级导航问题：下拉菜单宽度适配修复求助

问题现状 #

当前所有下拉菜单（包括Mega Menu和普通子级下拉）都强制占满100%宽度，导致子级下拉菜单过宽错位，影响用户体验。需要实现：

• 顶级触发的Mega Menu保持100%屏幕/容器宽度，容纳多列内容
• 子级下拉菜单自适应内容宽度，与对应父导航项对齐

解决方案：分两步修改模板和CSS #

第一步：修改FreeMarker模板（nav.ftl） #

核心是区分Mega Menu和普通下拉菜单，添加专属CSS类实现样式分离：

找到模板中下拉菜单代码块，替换为以下内容：

<!-- Dropdown Menu -->
<#-- 判断是否为Mega Menu：顶级菜单项且包含多级子菜单 -->
<#assign is_mega_menu = false />
<#if nav_item.getParentLayout()?exists == false && nav_item.getChildren()?filter(nav_child -> nav_child.hasChildren())?size > 0>
    <#assign is_mega_menu = true />
</#if>

<#if is_mega_menu>
    <div class="dropdown-menu mega-menu mt-0 dropdown-menu-custom">
<#else>
    <div class="dropdown-menu dropdown-menu-custom">
</#if>
    <div class="row mx-0">
        <#list nav_item.getChildren() as nav_child>
            <!-- Mega Menu Column -->
            <#if nav_child.hasChildren()>
                <div class="col-lg-3">
                    <div class="list-group list-group-flush">
                        <p class="mb-0 list-group-item p-1">
                            ${nav_child.getName()}
                        </p>
                        <#list nav_child.getChildren() as sub_nav_child>
                            <a href="${sub_nav_child.getURL()}" target="_blank"
                               class="list-group-item list-group-item-action p-1 border-0">${sub_nav_child.getName()}</a>
                        </#list>
                    </div>
                </div>
                <!-- Single Dropdown Item -->
            <#else>
                <a class="dropdown-item" href="${nav_child.getURL()}"
                   target="_blank">${nav_child.getName()}</a>
            </#if>
        </#list>
    </div>
</div>

注：移除原模板中dropdown-menu的w-100类，由CSS单独控制宽度。

第二步：修改CSS样式 #

替换原CSS中下拉菜单相关规则，分别定义两种菜单的样式：

/* 通用下拉菜单基础样式 */
.navbar-nav .dropdown-menu-custom {
  display: none;
  position: absolute;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  padding: 10px 0;
}

/* Mega Menu 样式：全屏宽度 */
.navbar-nav .mega-menu {
  width: 100vw;
  left: 0;
  top: 100%;
  margin-left: calc(-50vw + 50%); /* 与容器居中对齐 */
}

/* 普通下拉菜单样式：自适应宽度 */
.navbar-nav .dropdown:not(.custom-dropdown) .dropdown-menu-custom {
  min-width: 200px;
  width: auto;
  left: 0;
  top: 100%;
}

/* hover显示逻辑 */
.navbar-nav .dropdown:hover .dropdown-menu-custom {
  display: block;
}

/* 移动端适配：所有下拉占满宽度 */
@media (max-width: 768px) {
  .navbar-nav .dropdown-menu-custom,
  .navbar-nav .mega-menu {
    position: static;
    width: 100%;
    box-shadow: none;
    border: none;
    margin-left: 0;
  }
}

/* 保留原有其他样式 */
.header-logo {
  position: relative;
  top: -5px;
}

.navbar-nav .nav-item:hover .nav-link {
  color: #1d3e6c;
}

.custom-dropdown {
  position: static;
}

.navbar-toggler:focus {
  outline: none;
}

.navbar-nav .dropdown-item {
  padding: 10px 20px;
  color: #777;
  text-decoration: none;
  display: block;
}

.navbar-nav .dropdown-item:hover {
  background-color: #f8f8f8;
}

.navbar-nav .mega-menu .col-lg-3 {
  padding: 10px;
  flex: 1 1 25%;
}

.navbar-nav .mega-menu .list-group-item {
  padding: 10px 0;
  color: #777;
  text-decoration: none;
}

.navbar-nav .mega-menu .list-group-item:hover {
  background-color: #f8f8f8;
}

.navbar-nav .nav-link {
  color: #777;
  padding: 10px 15px;
  text-decoration: none;
}

.navbar-nav .dropdown-toggle::after {
  content: none;
}

效果说明 #

• Mega Menu：顶级菜单项触发时自动拉伸至屏幕全宽，多列内容正常排列
• 普通下拉菜单：子级菜单项触发时宽度自适应内容，与父导航项左对齐，不再占满全屏
• 移动端保持所有下拉菜单占满宽度，符合响应式设计

内容的提问来源于stack exchange，提问作者Amal