css - 导航选项卡悬停

Question

我需要帮助创建类似此链接的内容（http://www.standardchartered.co.in/borrow/）

当用户将鼠标悬停在导航上时，将出现灰色三角形图像。我不太确定该怎么做。请帮忙！

Answer 1

最好的方法是使用插件，可能是 jQuery。有许多下拉菜单插件可用。谷歌搜索“jquery 下拉菜单”将对您有所帮助。对我来说，第一个结果是： http ://www.1stwebdesigner.com/css/38-jquery-and-css-drop-down-multi-level-menu-solutions/

该页面上的第二个似乎具有您想要的效果，但这也取决于您希望菜单的其余部分如何显示。你需要做一些研究，然后选择一个适合你的。

或者，如果您只希望在没有菜单的情况下出现一个灰色三角形，当您将鼠标悬停在一个元素上时，那么像这样的一些 css 就是您想要的：

li:hover {
    background:url('./images/grey_triangle.png') center bottom;
}

这就是说，当 li 元素悬停时，使用 ./images/grey_triangle.png 作为背景图像并将其放置在元素底部的中心。您需要创建自己的灰色三角形，设置适当的填充等，但这是您需要的基本 css 效果。