dziedziczenie i jego zatrzymywanie

Question

witam mam mały problem a mianowicie mam taki kod:

https://codepen.io/depus/pen/bGbMMOM

kwestia polega na tym że moje rozwijalne menu przenika przez content strony ponieważ potomkowie mojego diva odziedziczyli opacity, chciałbym to jakoś zatrzymać aby potomkowie mojego diva nie miały przenikalności przy hoverze. 

body
{
    background-image: url("tło.png");
    font-family: 'Lato', sans-serif;
	font-size: 20px;
	width: 100%;
	hight: 100%;
	margin: 0 ! important;
                
}

.stickynav
{
	background-color: #1D415A;
	text-align: center;
	width: 100%;
	height: 52px;
   opacity: 0.8;
}

ol
{
    opacity:initial;
	padding: 0;
	margin: 0;
	list-style-type: none;
	line-height: 200%;
	display: inline-block;
	
}






ol > li
{
	float: left;
	width: 150px;
	height: 52px;
	border-right: 1px dotted  white;
	border-radius: 8%;
}




ol > li:first-child
{
	border-left: 1px dotted white;
}

ol > li:hover
{
   background-color: #2C4E65;
   display: block;
   
}

ol > li:hover>a
{
   color: black;

}

ol a
{
	color:#000000;
	text-decoration: none;
	display: block;
}

ol>li>ul
{
		list-style-type: none;
		padding: 0;
		margin: 0;
		display: none ;
}

ol>li>ul>li
{
	background-color:#2C4E65;
	position: relative;
	z-index: 100;
	border-top:  1px dashed ;
	
	
}

ol>li>ul>li:hover
{
	background-color: #2C4E65;
}

ol>li>ul>li:hover > a
{

	color: white;	
}

ol>li:hover>ul
{
        
	display: block;
}

 

Answer 1

Nie da się. Jak przodek ma opacity, to wszyscy potomkowie mają je liczone względem tego przodka (czyli nawet opacity: 1 w potomku to tak naprawdę 1 * 0.8 = 0.8).

Tutaj rozwiązaniem byłoby zastosowanie po prostu odpowiedniego, półprzezroczystego tła dla .stickynav, np. #1D415ACC; lub, po konwersji do RGB, rgb(29,65,90,.8).