文本链接不会设置样式并且并不总是可点击的

Question

此页面顶部的两个链接（“工作”和“关于”）弄乱了。

http://danux.me/

我不知道为什么我不能让它们风格化。我似乎只能应用浮点数，而 CSS 中的其他任何东西都没有做任何事情。

#nav_container {

float: right;
position: relative;
padding-right: 110px;
padding-top: 60px; 
}




#nav_container li {
float: left;  
display: inline;
color: #fff;
list-style: none;
text-decoration: none;
cursor: pointer;
}

就可点击部分而言，如果我展开浏览器，使它们位于平铺图像的右侧，则它们是可点击的。

我将平铺图像设置为相对的重叠效果，蓝条设置为绝对。

我为平铺图像设置了更高的 z-index，并尝试将更高的 z-index 应用于那些导航链接，认为我可以让它们弹出顶部并可以点击，但没有骰子。

有什么猜测吗？

Answer 1

问题是您的#home_console_wrapper 元素实际上与您的#color_beam 重叠，并且上面有一个大的padding-top 以隐藏此行为。它还有一个更高的z-index，这意味着它会让你的链接无法点击。

要纠正此问题，您需要从#color_beam 中删除position: absolute，并从#home_console_wrapper 中删除padding-top: 190px。

这将使您的链接变为可点击，而完全不改变显示。

如果您还想保持轻微的“重叠”效果，只需在 #home_console_wrapper 上设置一个否定的 margin-top：

#home_console_wrapper {
  margin-top: -35px;
}

希望这会有所帮助！ :)