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

Question

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

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

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

Answer 1

您在 #input 上的 z-index 一开始太高了（它是 5）。将其更改为 -1.

编辑：

我为找到您的问题所做的工作：在 Chrome 中，右键单击您希望正常单击的区域，然后从上下文菜单中 select "inspect element"。这将突出显示您实际上 单击的项目。请注意，当 active class 未打开时，z-index 属性 高于按钮。