Let say I've this code :
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Layers Opacity</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="robots" content="index,follow" />
<style type="text/css">
div#container
{
background-color: black;
width: 200px;
height: 400px;
padding-top: 50px;
opacity: 0.5;
}
ul#menu
{
background-color: red;
width: 150px;
margin: 0 auto;
opacity: 1;
}
</style>
</head>
<body>
<div id="container">
<ul id="menu">
<li><a href="#"></a>Menu 1</li>
<li><a href="#"></a>Menu 2</li>
<li><a href="#"></a>Menu 3</li>
<li><a href="#"></a>Menu 4</li>
<li><a href="#"></a>Menu 5</li>
</ul>
</div>
</body>
</html>
I'd like to have my "#menu" in full color, red. I tried to remove the inheritance by setting opacity to 1, but it doesn't work. Did i make something wrong ? Or Is it simply not possible by this way ?
I could probably do a layer, outside my menu, and position it in background with z-index, but I'm looking a way in pure css, without to modify my xhtml.
Thanks