将 CSS 不透明度应用于下拉菜单答案

【问题标题】：Applying CSS opacity to dropdown menu将 CSS 不透明度应用于下拉菜单
【发布时间】：2013-03-22 18:27:19
【问题描述】：

我有以下 jsfiddle 设置：

当移动到文件夹 2 > 文件夹 2.1 时，我在页面上有一个下拉菜单，如果您仔细查看不透明度，则会打开第二级子菜单（这很棘手，您可能需要一个好的监视器才能看到差异) 第二个子菜单和第一个子菜单是有区别的。在 css 中，我有以下代码，它应用了不透明度：

.ddsmoothmenu ul li ul li{
  display: list-item;
  float: none;
  background: #111;
  opacity: 0.92;
}

在我看来，第二个子菜单似乎已经应用了两次不透明度，并使其比第一个子菜单更透明。

请任何人帮忙，我希望一级子菜单和二级子菜单具有相同的不透明度。

谢谢

------------更新----------

抱歉，我之前可能不清楚，我想对所有级别的子菜单应用一致的不透明度，而不仅仅是删除它。

谢谢

【问题讨论】：

我检查了这个但没有问题

标签： jquery css drop-down-menu menu opacity

【解决方案1】：

问题是不透明度也适用于元素的子元素。所以每次你创建一个子菜单时，它每次都会获得父级不透明度的 0.92。

正如 spiel 所建议的，简单地从该行中删除不透明度可能适用于您的情况。

但是，如果您希望从第 2 级开始定位子菜单，并从那里保持一致，请尝试以下操作：

按照 spiel 的建议从当前类中移除不透明度

第一：

.ddsmoothmenu ul li ul li{
display: list-item;
float: none;
background: #111;
#opacity: 0.92; <--remove
}

然后（确保它出现在您上面的代码之后）

.ddsmoothmenu ul li {
opacity: 0.50
}

==== 编辑 =====

不知道这是什么礼仪，所以我只是要进行编辑。虽然我的建议可行，但下面 VenomVendor 给出的解决方案更干净、更好。不要像我之前建议的那样使用.ddsmoothmenu>ul>li>ul>li，而是使用.ddsmoothmenu ul li。

【讨论】：

谢谢，完美效果很好。感谢您的快速响应和接受的答案。

【解决方案2】：

删除ul li ul li 并将其更新为ul li 更新为http://jsfiddle.net/jMrsC/5/

/*Sub level menu list items (alters style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
 display: list-item;
 float: none;
 background: #111;
 }

.ddsmoothmenu ul li{
 opacity: .5;   /* value changed to see the difference */
 }
 .ddsmoothmenu ul li ul li{
  opacity: 1;  /* this means this class is not required, since default opacity is 1 */
 }

【讨论】：

【解决方案3】：

只需消除该类中的不透明度

.ddsmoothmenu ul li ul li{
  display: list-item;
  float: none;
  background: #111;
  #opacity: 0.92;
}

在你的小提琴中工作得很好。

子菜单正在读取它，因为它使用它上面级别的 0.92 不透明度。

【讨论】：