【问题标题】:Navigation tab hovering导航选项卡悬停
【发布时间】:2013-09-11 15:43:48
【问题描述】:

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

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

【问题讨论】:

  • 该页面上有超过 5 个导航菜单。你指的是哪一个?
  • 正如他所说,灰色三角形出现的地方。
  • 嗨,所有导航标签都有三角形图像:)

标签: css hover


【解决方案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 效果。

【讨论】:

  • 嗨奈杰尔,我做了完全相同的方式,但我注意到我的鼠标移动到下拉 div 后三角形图像会消失。
  • 您需要让下拉菜单成为 li 的子菜单才能使我的示例正常工作。像这样:
  • 菜单项
    • 子菜单...
猜你喜欢
相关资源
最近更新 更多
热门标签