<DIV> within <LI>, <div> taking background image of <li>

Below is the code.
There is a <div> within a <li> tag.
The li tag has a background image.
the problem is that the div tag is also taking the same background image of <li>
==============================================================

div.mydiv
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
border: 1px solid #5970B2;
cursorointer;
z-index:1;
background-image:none;


}


a.mylink
{ position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #EAEBD8;
color: #2875DE;
font: 11px arial;
background-image:none;
}

a.mylink:hover
{ background: #49A3FF;
color: #FFF}

===================================================


<li ><a href="products.php?id=7&ids=7" onmouseover="mopen('m2')" onmouseout="mclosetime()">Gentlemen</a>
<br />

<DIV ID="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()" class="mydiv">
<a href="products.php?id=19&ids=7|19" class="mylink">Tables</a>
<BR>
<a href="products.php?id=22&ids=7|22" class="mylink">Lighting</a>

<BR>
</DIV>

 

That's because the <div> layer is inside the <li> and you have given that <div> "background-image: none;" So it has no background therefore you can see through to the <li>'s background.