需要帮助实现这种效果（HTML和CSS）

Question

我想对this模板上的“下拉”一词（将光标置于其上时出现的灰色/黑色框）上悬停效果，并将其放在{{3的导航菜单上模板（来自同一网站）

我是初学者，我尝试了很多东西但是我无法达到同样的效果。我尝试从第一个模板.css复制#nav代码并将其粘贴到另一个模板css上，但它只复制文本，字体，颜色，但悬停效果不存在。

提前谢谢你，抱歉这个愚蠢的问题

Answer 1

第一个模板的下拉效果是使用Javascript而不是纯CSS实现的。您需要在该模板中找到控制它的.js文件。我查看了源代码，您可以通过右键单击页面并选择“查看源代码”来执行此操作。下拉列表由一个名为Dropotron的jQuery插件控制。

https://github.com/n33/jquery.dropotron

如果将此添加到您希望使用的新模板中，则可以达到相同的效果。

修改

正在发生3件事情，以便在单词本身上创造悬停效果。

• 背景颜色
• 弯曲的角落
• 插入白色边框以产生轻微的3D效果。

这些是通过三个CSS规则实现的：

• 背景
• 边界半径
• 箱阴影

确切的CSS是：

border-radius: 6px;
background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.15);
box-shadow: 1px 1px 0px 0px rgba(0, 0, 0, 0.024) inset, 1px 1px 0px 0px rgba(255, 255, 255, 0.024);

新主题标题上的背景颜色为白色，因此您不需要阴影。您只需将其插入CSS文件：

#nav ul li a {
    border-radius:6px;
}

#nav ul li a:hover {
    background:rgba(0, 0, 0, 0.15);
}

如果您愿意，可以更改颜色。