先上演示效果
解：
如图，当标签在红框区域颜色可以正常显示，但到红框下面的一些区域则和白色背景颜色相重叠。则不显示。
我们可以改变标签栏的样式，让其在白色背景时变成黑色。
如图下所示
点击右侧演示网页即可演示网页
其中用到了JS和html中的οnmοuseοver=“function()”事件。
在颜色变化的标签div中打一个id="nav_content"，
在颜色和标签颜色重叠的div（如图中的蓝色区域）中写一个οnmοuseοver=“function()”事件，
当鼠标移动到蓝色区域时，执行οnmοuseοver=“function()”事件，
function()函数可以给id="nav_content"的div中加class=" "样式，
样式让文字变黑，就可以解决标签颜色在黑色和白色背景颜色重叠问题。
代码：
<script>var logos = function() {document.getElementById('logo1').classList.remove('hiddenlogo');document.getElementById('logo').classList.add('hiddenlogo');document.getElementById('nav_content').classList.remove('nav_content');document.getElementById('nav_content').classList.add('nav_content1');document.getElementById('nav_content_ul').classList.remove('nav_content_ul');var aaa = function() {var c = document.getElementsByName('font_color');for (var i = 0; i <= c.length; i++) {c[i].classList.remove('font_white');c[i].classList.add('font_black');}}aaa();}var logos1 = function() {document.getElementById('logo').classList.remove('hiddenlogo');document.getElementById('logo1').classList.add('hiddenlogo');document.getElementById('nav_content').classList.add('nav_content');document.getElementById('nav_content').classList.remove('nav_content1');document.getElementById('nav_content_ul').classList.add('nav_content_ul');var aaa = function() {var c = document.getElementsByName('font_color');for (var i = 0; i <= c.length; i++) {c[i].classList.remove('font_black');c[i].classList.add('font_white');}}aaa();}</script>
别忘了设置另一个onmouseover事件，这样就可以复原标签了。要不加另一个事件，改了标签颜色就回不去了。
TIPS：在css里面加一个transition过度样式，可以让导航标签过度的更无缝衔接一点。我这里设置的是0.4s
