下拉菜单应用CSS不透明度



我有以下jsfiddle设置:

http://jsfiddle.net/jMrsC/1/

我在页面上有一个下拉菜单,当移动到文件夹2>文件夹2.1第二级子菜单打开,如果你仔细看看不透明度(这是相当棘手的看到你可能需要一个很好的监视器看到的差异)的第二个子菜单和第一个子菜单有差异。在css中,我有以下代码,用于应用不透明度:

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

对我来说,看起来不透明度已经被应用到第二个子菜单两次,使它比第一个子菜单更透明。

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

感谢

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

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

谢谢

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

正如spiel所建议的那样,简单地从那一行删除不透明度可能对你的情况有效。

然而,如果你想从第二层开始瞄准子菜单,并从那里保持一致,试试这个:

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

:

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

然后(确保在上面的代码之后)

.ddsmoothmenu ul li {
opacity: 0.50
}

==== edit =====

不知道这有什么礼节,所以我要编辑一下。虽然我的建议是有效的,但下面由VenomVendor给出的解决方案更干净、更好。

使用.ddsmoothmenu ul li代替我之前建议的.ddsmoothmenu>ul>li>ul>li

删除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 */
 }

直接去掉那个类的不透明度

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

在你的小提琴里弹得很好。

子菜单显示其上方的不透明度为0.92

最新更新