此教程和本站现在所使用的效果有区别。

前置条件

js和css文件创建和引入问题看这篇文章：Hexo博客添加自定义css和js文件

导航栏居中

思路：我们只需要让他绝对定位，然后让他距离左边50%，然后再往左移动自身的50%即可实现。

1
2
3
4
5
6
#nav .menus_items {
    position: absolute;
    width: fit-content;
    left: 50%;
    transform: translateX(-50%);
}

注意，这里我们使用fit-content使menus_items的宽度为内容宽度，这样可以避免一些奇奇怪怪的BUG，如下图。
不加fit-content

加fit-content

子菜单横向居中

子菜单居中其实也非常的简单，我们只需要使其所有子菜单先变成横向，即:

1
2
3
#nav .menus_items .menus_item:hover .menus_item_child{
  display: flex;
}

至于居中，我看其他博客教程是自动计算，不仅需要修改源码，还得保持每一个子菜单名字同等长度，而且最后还不一定真正居中，歪歪扭扭的很难受，麻烦且效果不够好。

我们可以单独给每一个ul元素添加样式。
优点是可以把每一个子菜单调到我们满意的位置。
缺点就是如果你新增菜单，需要修改一下css，不过一般来说菜单我们很少修改。

我们在调子菜单的时候，有个小功能对我们很有用，如下：
打开hover

打开这个可以让子菜单显示出来，方便我们修改样式。这里要注意，我们hover是在div上的，在其他地方hover是没效果的。

然后我们给每一个子菜单设置样式，这里拿其中一个做演示，如果你有多个折叠子菜单，多复制几个就可以：

1
2
3
4
/* 这里的2是代表导航栏的第二个元素，即有子菜单的元素，可以按自己需求修改 */
.menus_items .menus_item:nth-child(2) .menus_item_child {
    left: -65px;
}