Css 设置下拉菜单LI'；s背景色在悬停时不透明

我已经设定了

#navi ul li:hover { background-color: red; opacity: 1.0; filter: alpha(opacity=100); }

但它不起作用

代码如下：

#导航{宽度：100%；高度：40px；边距顶部：10px；位置：相对；背景色：#0071BC；不透明度：0.75；过滤器：alpha（不透明度=75）；字体系列：“Russo One”，无衬线；z索引：100；}
#navi ul{padding:0；margin:0；display:inline table；text align:center；position:relative；z-index:100；}
#navi ul:在{content:”；清除：两者；显示：块；}
#navi ul li{显示：块；填充：10px 20px 11px 20px；列表样式：无；位置：相对；浮点：左；}
#navi ul li a{字体大小：12pt；颜色：#F7931E；文本转换：大写；}
#navi ul li:hover{背景色：红色；不透明度：1.0；过滤器：alpha（不透明度=100）；}
#navi ul li:第一个孩子{左边距：10px；}
#navi ul li:最后一个子{左边距：210px；}
#navi ul{显示：无；位置：绝对；顶部：100%；左侧：0；背景色：#0071BC；不透明度：0.75；过滤器：alpha（不透明度=75）；z索引：100；}
#navi ul li{float:none；position:relative；字体大小：11pt；}
#navi ul li:第一个子项{margin:0；}
#navi ul li:最后一个子项{填充底部：10px；边距：0；}
#navi ul li:hover>ul{显示：块；z索引：100；}

使用

不透明度时，子元素固有其父元素的不透明度。您可以通过使用允许您在一条语句中指定不透明度和颜色的颜色来解决这个问题

试试这个

#navi {
    width: 100%;
    height: 40px;
    margin-top: 10px;
    position: relative;
    background-color: rgba(0,113,188,.75);
    font-family:'Russo One', sans-serif;
    z-index: 100;
}
#navi ul {
    padding: 0;
    margin: 0;
    display: inline-table;
    text-align: center;
    position: relative;
    z-index: 100;
}
#navi ul:after {
    content:"";
    clear: both;
    display: block;
}
#navi ul li {
    display: block;
    padding: 10px 20px 11px 20px;
    list-style: none;
    position: relative;
    float: left;
}
#navi ul li a {
    font-size: 12pt;
    color: #F7931E;
    text-transform: uppercase;
}
#navi ul li:hover {
    background-color: rgba(255,0,0,1);
}
#navi ul li:first-child {
    margin-left: 10px;
}
#navi ul li:last-child {
    margin-left: 210px;
}
#navi ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: rgba(0,113,188,.75);
    z-index: 100;
}
#navi ul ul li {
    float: none;
    position: relative;
    font-size: 11pt;
}
#navi ul ul li:first-child {
    margin: 0;
}
#navi ul ul li:last-child {
    padding-bottom: 10px;
    margin: 0;
}
#navi ul li:hover > ul {
    display: block;
    z-index: 100;
}

正如mylvis所说，如果某个对象的父对象具有任何级别的透明度，则不能将其设置为完全不透明

RGBA将是我的第一选择，但如果我必须使用不透明度，我会设置LIs本身的初始透明度级别，以便可以再次将其重置为1.0

#navi {
    width: 100%;
    height: 40px;
    margin-top: 10px;
    position: relative;
    background-color: rgba(0,113,188,.75);
    font-family:'Russo One', sans-serif;
    z-index: 100;
}
#navi ul {
    padding: 0;
    margin: 0;
    display: inline-table;
    text-align: center;
    position: relative;
    z-index: 100;
}
#navi ul:after {
    content:"";
    clear: both;
    display: block;
}
#navi ul li {
    display: block;
    padding: 10px 20px 11px 20px;
    list-style: none;
    position: relative;
    float: left;
}
#navi ul li a {
    font-size: 12pt;
    color: #F7931E;
    text-transform: uppercase;
}
#navi ul li:hover {
    background-color: rgba(255,0,0,1);
}
#navi ul li:first-child {
    margin-left: 10px;
}
#navi ul li:last-child {
    margin-left: 210px;
}
#navi ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: rgba(0,113,188,.75);
    z-index: 100;
}
#navi ul ul li {
    float: none;
    position: relative;
    font-size: 11pt;
}
#navi ul ul li:first-child {
    margin: 0;
}
#navi ul ul li:last-child {
    padding-bottom: 10px;
    margin: 0;
}
#navi ul li:hover > ul {
    display: block;
    z-index: 100;
}