API Management Developer Portal无法配置Dropdown menu问题咨询

目前官方默认的可视化编辑界面中，通用Menu部件确实没有直接配置下拉菜单的可视化选项，也没有内置的通用子菜单/下拉导航部件，你可以通过以下两种方式实现需求：

• 方案一：使用自定义HTML部件快速实现
  进入顶部栏编辑模式，删除原有默认Menu部件，添加「自定义HTML」部件，写入带下拉逻辑的导航代码即可，可参考以下示例：

  <nav class="custom-dropdown-nav">
    <ul style="display: flex; gap: 24px; list-style: none; padding: 0; margin: 0;">
      <!-- 单层级导航项 -->
      <li><a href="/home">首页</a></li>
      <!-- 带下拉的父级导航项 -->
      <li style="position: relative;">
        <a href="javascript:void(0)">文档中心</a>
        <ul class="dropdown-list" style="display: none; position: absolute; top: 100%; left: 0; margin: 0; padding: 12px 0; list-style: none; min-width: 180px; background: #fff; box-shadow: 0 3px 10px rgba(0,0,0,0.15);">
          <li><a href="/doc/guide" style="display: block; padding: 4px 16px;">接入指南</a></li>
          <li><a href="/doc/faq" style="display: block; padding: 4px 16px;">常见问题</a></li>
        </ul>
      </li>
    </ul>
  </nav>
  <script>
  // 实现hover显示下拉逻辑，也可根据需要改为点击触发
  document.querySelectorAll('.custom-dropdown-nav li').forEach(item => {
    const dropdown = item.querySelector('.dropdown-list')
    if(dropdown) {
      item.addEventListener('mouseenter', () => dropdown.style.display = 'block')
      item.addEventListener('mouseleave', () => dropdown.style.display = 'none')
    }
  })
  </script>
  

  代码中导航链接的路径可以替换为你提前在「内容」→「页面」中创建的对应页面的访问路径。
• 方案二：扩展自定义导航部件
  如果你需要可视化配置能力，可以基于官方开源的开发者门户代码仓库，自行扩展支持下拉配置的通用导航部件，本地编译打包后上传到你的API管理实例，扩展完成的部件会出现在部件库中，后续可以直接拖拽使用、可视化配置菜单层级。

补充说明：你目前找到的List of APIs (dropdown)和List of products (dropdown)是官方内置的特定场景下拉部件，仅支持拉取API、产品列表生成下拉，不支持自定义页面导航，无法直接用于实现通用页面的下拉菜单。

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