working with Css alpha setting in <ul><LI>

[SERVERMAN]

i want to know if there is a way to aply alpha settings to one property of <ul><li> without affecting other properties of <ul><li> for example
ul#navlist li {


margin: 0;
padding: 7px 0 7px 0;
background-color: #999999 , -moz-opacity:0.2 ; //this will not make the setting for background be #999999 with 0.2 opacity//
float: left;
font-family:verdana,arial,sans-serif;
font-size:10px;
font-weight:bold;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;



}

ul#navlist li {


margin: 0;
padding: 7px 0 7px 0;
background-color: #999999
float: left;
font-family:verdana,arial,sans-serif;
font-size:10px;
font-weight:bold;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
-moz-opacity:0.2 ;//this will aply alpha settings to borders, font, and background. and i only want the alpha settings in a background.//


}

all i want is background with alpha setting. any suggestion?
i did search for alpha topic in this forum and i think all of them are image base problems thank for the help

[aj_nsc]

If you apply the alpha transparency to the li in a stylesheet, it gets applied to the li and anything and everything contained therein. That's the way CSS works, any child of an element cannot have a higher opacity than it's parent....

Usually, the only way to achieve this effect is to fake it - e.g. make an element LOOK like it's inside an element with a specified alpha opacity, without it actually being inside the element in the actual markup. This is usually accomplished with absolute positioning and a good knowledge of cross-browser CSS positioning.

[SERVERMAN]

ok is good to hear that lesson. the reason i was trying to do that is because i like the color the alpha setting give you when you apply it to specific color and i was able to find the code of the color that i was looking for f6f6f6 this color is similar to 999999 with alpha of 10%. so the setting will be

ul#navlist li {


margin: 0;
padding: 7px 0 7px 0;
background-color: #f6f6f6; //this is one way to achieve what i was looking for
float: left;
font-family:verdana,arial,sans-serif;
font-size:10px;
font-weight:bold;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;



}

thanks for the replay