css - 设置下拉菜单 LI 的背景颜色在悬停时不透明

Question

我已经设置了，

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

但它不起作用。

这是代码:http://jsfiddle.net/mylvis/jEyTy/

<div id="navi">
    <ul>
      <li><a href="">1</a></li>
      <li><a href="">2</a>
            <ul>
                <li><a>1.1</a></li>
                <li><a>1.2</a></li>
                <li><a>1.3</a></li>
            </ul>
      </li>
      <li><a href="">3</a></li>
      <li><a href="">4</a></li>
    </ul>
  </div>

#navi { width: 100%; height: 40px; margin-top: 10px; position: relative; background-color: #0071BC; opacity: 0.75; filter: alpha(opacity=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: red; opacity: 1.0; filter: alpha(opacity=100); }
#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: #0071BC; opacity:0.75; filter:alpha(opacity=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; }

Answer 1

使用opacity 时，子元素继承了父元素的不透明度。您可以使用 RGBA 来解决这个问题允许您在一条语句中指定不透明度和颜色的颜色。

试试这个 jsFiddle example

#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;
}