Настройка выпадающего меню цвет фона непрозрачный 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; 
} 

Answer 2

Как mylvis сказал, вы не можете установить что-нибудь, чтобы быть полностью непрозрачной, если его родитель имеет какой-либо уровень прозрачности.

RGBA был бы моим первым выбором, но если бы мне пришлось использовать непрозрачность, я бы установил начальный уровень прозрачности на самих LI, чтобы можно было снова вернуть его обратно в 1.0.