海洋CMS导航菜单怎么自定义？多级菜单设置教程

结论先说：海洋CMS 自定义导航菜单只有两条路——后台改文字/链接/排序（改不了层级），或者直接改模板文件里的 HTML 列表结构。要做二级、三级下拉菜单，必须走第二条路，核心动作就是在导航的 <li> 里再嵌套一层 <ul>，再配 15 到 20 行 CSS。

海洋CMS导航菜单在哪里改？先分清后台和模板两个入口

判断方法很简单：打开后台能改到、前台马上变的，是后台导航配置；后台翻遍了都找不到、或者改了没反应的，说明模板里把导航写死了。

海洋CMS 的导航默认有两套来源。一套是后台菜单里维护的栏目／自定义链接，另一套是模板文件里直接手写的 HTML 列表。前者动不了层级，后者随便你怎么嵌套。实际操作中，绝大多数想加下拉菜单的人最后都是去改模板。

后台怎么改导航文字、链接和排序？

登录后台后，进「系统」相关菜单，找导航／菜单管理类的入口（不同版本叫法不一样，有的叫「自定义导航」，有的叫「菜单管理」）。

列表里通常每条对应一个导航项，能改四项：名称、链接、排序值、是否新窗口打开。把排序数字改小，该项就往前排；链接可以填动态地址，也可以填伪静态地址，例如栏目页的静态路径。改完保存，回前台刷新看效果。

结论：后台只适合做微调，它不提供父子层级字段，所以做多级菜单这条路走不通。

多级菜单怎么设置？改模板文件的三步

第一步，找文件。导航一般在当前模板目录下的头部文件里，路径形如 /templets/模板名/，文件名常见的写法是 header、head、top 这类，也有模板直接把导航写在首页文件顶部。用编辑器全局搜索导航里的一个中文词，一秒就能定位。

第二步，备份。把这个文件复制一份改名，出错能立刻还原。

第三步，改结构。原来的写法一般是平铺的一串列表项，改成下面这样，父项里多套一层 <ul>：

<ul class="nav">
  <li><a href="/">首页</a></li>
  <li class="has-sub">
    <a href="/list/1.html">电影</a>
    <ul class="sub">
      <li><a href="/list/2.html">动作片</a></li>
      <li><a href="/list/3.html">喜剧片</a></li>
    </ul>
  </li>
</ul>

想做三级，就在 .sub 里的某个 <li> 再嵌一层 <ul>，结构完全一样，只是 CSS 选择器要跟着写一层。

二级菜单的 CSS 怎么写才能悬停展开？

关键就四条：父项相对定位、子菜单绝对定位、默认隐藏、悬停显示。

.nav > li { position: relative; }
.nav .sub {
  display: none;
  position: absolute;
  top: 100%; left: 0;
  min-width: 120px;
  z-index: 999;
}
.nav > li:hover > .sub { display: block; }

注意点有两个：父级容器如果有 overflow: hidden，下拉菜单会被裁掉，要去掉或改成 visible；子菜单的 z-index 要比轮播图、播放器这些元素高，否则会被盖住。

如果想让子菜单在父项右侧横向展开（三级常用），把 top: 0; left: 100%; 即可。

改完前台没变化？三个排查点

第一，缓存。改完模板回后台点一次「更新缓存」，或者手动清理站点根目录下的缓存文件，否则前台读的还是旧的编译结果。

第二，模板目录认错了。后台「模板设置」里看当前启用的模板名，和你改的目录名必须一致，很多人改的是另一套模板。

第三，文件编码。编辑器保存时选 UTF-8 无 BOM，带上 BOM 可能让页面顶部多出空白、布局错位。

最后收一下：后台改导航只能调文字、链接、顺序；多级菜单必须去 /templets/模板名/ 下的头部模板里嵌套 <ul>，配 position + :hover 的 CSS，再清一次缓存。改之前先备份，出错随时回滚。