请教一个关于CSS中position:relative的问题

Question

您好，想请教您一个问题，详情的情况如下：

上图是一个网页head部分的截图，第一个红块是logo，第二个红块是广告语，在这2个板块中间有个竖线，这个竖线要与菜单中的首页进行对齐。
网页主体的宽度是960px，即logo的左侧到最后一个菜单的右侧是960PX，截图是我电脑的分辨率1366PX。
想要的效果是在任何分辨率下，首页都与那个竖线对齐。
现在我的代码已经实现了这个效果，如下图：首页已经和竖线对齐了，而且任何分辨率下都是对齐的。

但是有个问题，菜单并没有在菜单的位置上，而是拥有了一行+菜单栏的高度，即26+30=56PX，按照我代码，我预想的是应该菜单会移到实际菜单应该在的位置的，但是却不是，不知道为什么，我的代码如下：

想请教您一下，我的代码哪里写错了，为什么不能实现我预想的效果，谢谢！麻烦您了
上面的代码的思路：
先做一个背景，背景各有50%是不同的颜色，这样就可以实现菜单左侧前面有点颜色不是黑色。
然后在建立导航，导航先弄个容器navbox，这个就是一个与logo上的head部分相同位置的，及宽度960，居中。
在这个导航的容器中保护导航内容，然后导航的首页根据logo到线的距离来计算做外框距离，这样就可以让首页这个链接与线对齐了。
但是导航的内容是在背景下面的，所以需要进行定位，让导航覆盖到背景（bg）上面，导航内容也就会跟随的覆盖到背景的位置，就实现了我的需求

Answer 1

导航的背景设position：relative nav设为position：absolute 试试