Magento 1.9主菜单HTML代码修改及导航问题咨询

先看你提供的代码里几个明显的问题，这些大概率是导致导航异常的根源：

• 未闭合的<li class="title"><a href="#">AAB</a>标签，DOM结构错乱会直接引发布局错位、下拉菜单不显示等问题
• 不完整的class=" has-sub...属性，缺失的类名会导致交互逻辑或样式失效
• 子菜单关联不明确，data-submenu-id对应的子菜单没有正确匹配

下面是修复后的完整导航代码，同时适配Bootstrap下拉组件（因为你用了dropdown-toggle这类Bootstrap类）：

<nav class="navbar" role="navigation">
    <div class="container">
        <ul class="nav navbar-nav">
            <!-- 顶级菜单项 -->
            <li class="dropdown">
                <a href="#" class="level-top dropdown-toggle" data-toggle="dropdown">AAA<b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <!-- 标题型菜单项 -->
                    <li class="title">
                        <a href="#">AAB</a>
                    </li>
                    <!-- 带二级子菜单的菜单项 -->
                    <li data-submenu-id="submenu-category-node-13550" class="dropdown-submenu">
                        <a href="#" class="has-submenu">二级菜单标题</a>
                        <!-- 关联的子菜单 -->
                        <ul class="dropdown-menu" id="submenu-category-node-13550">
                            <li><a href="path/to/your/page">子菜单项1</a></li>
                            <li><a href="path/to/another/page">子菜单项2</a></li>
                        </ul>
                    </li>
                    <!-- 其他下拉菜单项 -->
                </ul>
            </li>
            <!-- 其他顶级菜单项 -->
        </ul>
    </div>
</nav>

再给你几个额外的修复步骤，解决常见的导航异常：

1. 修复模板生成逻辑：如果这个导航是Magento模板（比如app/design/frontend/[your-theme]/default/template/page/html/topmenu.phtml）动态生成的，检查循环渲染部分的代码，确保每个<li>标签都正确闭合，比如：

   <?php foreach ($this->getStoreCategories() as $_category): ?>
       <li class="<?php echo $_category->getLevel()>1 ? 'dropdown-submenu' : 'dropdown' ?>">
           <a href="<?php echo $this->getCategoryUrl($_category) ?>" class="<?php echo $_category->hasChildren() ? 'level-top dropdown-toggle has-submenu' : 'level-top' ?>" <?php echo $_category->hasChildren() ? 'data-toggle="dropdown"' : '' ?>>
               <?php echo $_category->getName() ?><?php echo $_category->hasChildren() ? '<b class="caret"></b>' : '' ?>
           </a>
           <?php if($_category->hasChildren()): ?>
               <ul class="dropdown-menu" id="submenu-category-node-<?php echo $_category->getId() ?>">
                   <?php echo $this->drawItem($_category) ?>
               </ul>
           <?php endif; ?>
       </li>
   <?php endforeach ?>
   

2. 初始化Bootstrap下拉组件：如果导航依赖Bootstrap，确保在页面加载完成后初始化插件，在主题的JS文件（比如js/theme.js）中添加：

   jQuery(document).ready(function() {
       // 初始化基础下拉
       jQuery('.dropdown-toggle').dropdown();
       // 处理多级下拉的点击事件（避免和顶级下拉冲突）
       jQuery('.dropdown-submenu').on('click', function(e) {
           e.stopPropagation();
           jQuery(this).toggleClass('open');
       });
   });
   

3. 检查CSS冲突：有时候Magento默认的导航样式和Bootstrap样式会冲突，你可以通过添加自定义CSS调整：

   .navbar .dropdown-menu {
       margin-top: 0;
       border-radius: 0;
   }
   .dropdown-submenu .dropdown-menu {
       left: 100%;
       top: 0;
       margin-left: -1px;
   }
   

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