This is the given HTML code structure (view in JS Fiddle)
How can I adjust the background color to be 20% opaque white while keeping the text black? It needs to be compatible with IE7.
<ul class="menu">
<li class="first expanded active-trail active menu-mlid-188"><a href="/educatours/aboutus" title="" class="active-trail active">About Us</a>
</li>
<li class="expanded menu-mlid-186"><a href="/educatours/tour_process" title="">Teachers</a>
</ul>
</li>
</ul>
body {
background-color:#E2DFD5;
}
ul.menu a {
color:#333;
font-weight:bold;
text-decoration:none;
}
ul.menu li {
list-style-type:none;
padding:0;
margin:0;
display:inline-block;
width:49%;
background-color:#FFF;
}
ul li.expanded {
list-style-image:none
}