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

时间:2013-03-22 09:45:54

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

我有以下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;
}
对我来说,看起来不透明度已经应用了两次到第二个子菜单,并使其比第一个子菜单略微透明。

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

由于

------------------------更新--------------------- < / p>

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

由于

3 个答案:

答案 0 :(得分:2)

问题是不透明度也适用于元素的子元素。因此,每次创建子菜单时,每次都会获得父级不透明度的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>ul>li,而是使用.ddsmoothmenu ul li

答案 1 :(得分:1)

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

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

答案 2 :(得分:0)

简单地消除该类中的不透明度

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

在小提琴中工作得很好。

子菜单将其读取为使用其上方0.92的不透明度。