导航菜单Shop栏出现异常文本(mole)及子菜单右偏求代码排查修改方案

问题1：Shop区域出现异常文本mole #

原因 #

• HTML语法不规范：Shop下二级子菜单的<li>标签写法错误，将<a>标签的属性直接写在了<li>上，错误代码为<li a href="#">，浏览器解析异常可能生成冗余文本
• JS加载逻辑异常：代码中点击.music类元素时会执行$('#result').load('album_list_index.php')加载远程文件内容，但当前页面不存在id="result"的容器，若远程文件返回mole文本，内容会异常渲染到Shop区域

修复方法 #

1. 修正二级子菜单HTML语法：

<!-- 原错误代码 -->
<li a href="#">리플랫</li>
<li a href="#">작품</li>
<li a href="#">MD</li>

<!-- 修改后正确代码 -->
<li><a href="#">리플랫</a></li>
<li><a href="#">작품</a></li>
<li><a href="#">MD</a></li>

2. 要么补充<div id="result"></div>容器承接加载内容，要么暂时注释掉不需要的load逻辑，避免无关内容渲染到导航区。

问题2：Shop二级子菜单右偏移，与上级菜单居中对齐 #

原因 #

• 浏览器默认给<ul>标签设置了padding-left默认值（约40px），未手动清除导致子菜单整体右移
• 子菜单设置了绝对定位，但父元素未设置相对定位，且没有配置水平居中的偏移规则

修复方法 #

修改CSS对应规则：

1. 给导航的一级li添加相对定位，作为子菜单绝对定位的参照：

nav ul li {
  display: inline-block;
  list-style-type: none;
  transition: all 0.2s;
  /* 新增规则 */
  position: relative;
}

2. 清除子菜单ul的默认边距，添加水平居中规则：

nav li>ul {
  display: none;
  background-color: #bbb;
  /* 新增以下规则 */
  padding: 0;
  margin: 0;
  left: 50%;
  transform: translateX(-50%);
}

修改后子菜单就会基于上级Shop菜单水平居中对齐，符合预期效果。

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