扩展搜索框覆盖导航栏上的链接

Question

尝试应该以搜索单片眼镜图标开头的 Javascript，当您单击它时，搜索框会在导航栏上方展开。现在可以了，但问题是即使搜索框不在导航栏上方，您也无法单击导航栏中的任何链接。可能是因为搜索框仍然“存在”，即使它不在。

我认为它在我的 css 文件中，但我尝试了一些修改，但无济于事。似乎唯一可行的方法是使搜索栏的宽度非常小。我在这里做了一个问题示例：http://somm.icorp.net/search-test.html

知道如何让栏正确展开并且在单击搜索图标之前不覆盖链接吗？

Answer 1

您在 #input 上的 z-index 最初过高（为 5）。将其更改为 -1。

编辑：

我为找到您的问题所做的工作：在 Chrome 中，右键单击您希望正常单击的区域，然后从上下文菜单中选择“检查元素”。这将突出显示您实际点击的项目。请注意，当 active 类未启用时，z-index 属性高于按钮。