Transparency and CSS Drop Down Menus

I am having trouble getting my drop down menus to work in firefox 2.0 and ie7.  It works great in ie6.  The menus cover up the text and aren't transparent in firefox 2.0 and ie7.  In ie6, the transparency shows fine.
Here is my code.

---Style sheet-----
 /* Set up the default font and ovrall size to include image */
.menu {
font-family: tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif;
width:500px;
position:relative;
margin:2em 125px 0 125px;
font-family: tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif;
}
/* get rid of the default padding - margin and bullets */
.menu ul {
padding:0;
margin:0;
list-style-type: none;
}
/* make menu horizontal */
.menu ul li {
float:left;
position:relative;
}
/* set up the default top level links */
.menu ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
color:#000;
width:88px;
height:1.5em;
font-weight:bold;
color:#888;
border-bottom:8px solid #888;
background:#fff;
padding-left:10px;
line-height:1.5em;
margin-right:2px;
}
/* hack for IE5.5 to correct the faulty box model */
* html .menu ul li a, .menu ul li a:visited {
width:98px;
w\idth:88px;
}
/* hide the drop down menu */
.menu ul li ul {
display: none;
}
/* remove all table style so that it does not interfere with the menu */
.menu table {
margin:-1px;
border-collapse:collapse;
font-size:1em;
}

/* first line for IE7 and non-IE browsers, second line for IE5.5 and IE6 */

/* style the top level hover */
.menu ul li:hover a,
.menu ul li a:hover {
color:#000;
border-bottom:8px solid #606;
}
/* make the drop down menu show and correctly position it */
.menu ul li:hover ul,
.menu ul li a:hover ul {
display:block;
position:absolute;
top:1.2em;
margin-top:11px;
left:0;
width:96px;
border:1px solid #888;
border-top:0;
background:transparent;
}
/* style the drop down links with no hover */
.menu ul li:hover ul li a,
.menu ul li a:hover ul li a {
display:block;
color:#000;
border:0;
margin:0;
color:#333;
font-weight:normal;
font-size:0.9em;
height:auto;
line-height:1em;
padding:5px;
width:86px
}
/* style the drop down menu links when hovered */
.menu ul li:hover ul li a:hover,
.menu ul li a:hover ul li a:hover {
background:#888;
color:#fff;
}

/* special styling for IE5.5 and IE6 - transparency is non validating */
.menu ul li a:hover ul {
background:transparent filter: alpha(opacity=60);
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60);
opacity:0.6;
opacity: .50;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
margin-top:10px; /* for IE5.5 faulty box model */
marg\in-top:11px; /* for IE6 */
}
/* IE5.5 hack for faulty box model in drop down menu */
.menu ul li a:hover ul li a {
background:#ddd;
width:96px; /* for IE5.5 faulty box model */
w\idth:86px; /* for IE6 */
}


-----Here is the html page------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link rel="stylesheet" media="all" type="text/css" href="style/drop_variation.css" />
</head>
<body>

<h2>Variations on a drop-down theme</h2>
<h3>17th April 2006 - updated - 10th June 2006</h3>

<div class="menu">

<ul>
<li><a class="drop" href="../menu/index.html">Demos<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tr><td>
      <ul>
      <li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars advertising page</a></li>
      <li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text around images</a></li>
      <li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
      <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
      <li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
      <li><a href="../menu/old_master.html" title="Image Map for detailed information">image map for detailed information</a></li>
      <li><a href="../menu/bodies.html" title="fun with background images">fun with background images</a></li>
      <li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
      <li><a href="../menu/em_images.html" title="em size images compared">em image sizes compared</a></li>
      </ul>
</td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
</li>

<li><a href="../boxes/index.html">Boxes<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tr><td>
      <ul>
      <li><a href="spies.html" title="a coded list of spies">a coded list of spies</a></li>
      <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
      <li><a href="expand.html" title="an enlarging unordered list">enlarging unordered list</a></li>
      <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
      <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
      <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
      <li><a href="circles.html" title="circular links">circular links</a></li>
      </ul>
</td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
</li>

<li><a href="../mozilla/index.html">Mozilla<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tr><td>
      <ul>
      <li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>
      <li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
      <li><a href="../mozilla/content.html" title="Using content:">content:</a></li>
      <li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>
      <li><a href="../mozilla/rainbow.html" title="I can build a rainbow">I can build a rainbow with transparent borders</a></li>
      <li><a href="../mozilla/snooker.html" title="Snooker cue">a snooker cue using border art</a></li>
      <li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li>
      </ul>
</td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
</li>

<li><a href="../ie/index.html">Explorer<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tr><td>
      <ul>
      <li><a href="../ie/exampleone.html" title="Example one">the first example for Internet Explorer</a></li>
      <li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li>
      <li><a href="../ie/exampletwo.html" title="Vertical align">vertically aligning text</a></li>
      </ul>
</td></tr></table><!--[if lte IE 6]></a><![endif]-->
</li>

<li><a href="../opacity/index.html">Opacity<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tr><td>
      <ul>
      <li><a href="../opacity/colours.html" title="colour wheel">a colour wheel using opaque colours</a></li>
      <li><a href="../opacity/picturemenu.html" title="a menu using opacity">a menu using opacity</a></li>
      <li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li>
      <li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li>
      </ul>
</td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
</li>

</ul>

</div>
<br>
<br>
<br>
<table align="center">
<tr>
<td width="300">
This is data to test
</td>
</tr>
</table>
</body>
</html>


Thanks in advance
ntiguyAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

jkmyoungCommented:
Try adding the opacity value to this section:
/* make the drop down menu show and correctly position it */
.menu ul li:hover ul,
.menu ul li a:hover ul {
display:block;
position:absolute;
top:1.2em;
margin-top:11px;
left:0;
width:96px;
border:1px solid #888;
border-top:0;
background:transparent;
opacity:0.5;
}

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Deepak VasudevanGlobal TravellerCommented:
There is a little writeup on FF Transparency over here:

http://www.mandarindesign.com/opacity.html
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.