While I am willing to use Javascript, I REALLY want to use CSS.
Now... On to my issue.

I have created a little Right-Click Menu, it is available Here (Click the link at the bottom of the page.)

Here's the problem: The CSS hover effect works well, when I hover over a blank part of the menu background. However, when I put my mouse over the text that is "on top" of the menu background, the menu CSS hover effect is deactivated because I have my mouse over a different element.

I am aware that there is not any CSS parent selector (this is true right?), but am sure there must be a creative way to solve this.

Any Ideas? Here's the full code. (note that it differs from the code found on the online example because the Javascript is included here. In the online example, the javascript is an external file.

HTML Code:
<!DOCTYPE html>
<head>
<style>
.r_left-m {
background-image:url('images/bl.jpg');
height:26px;
width:34px;
position:absolute;
border-left:1px solid gray;
}
.r_left-t {
background-image:url('images/bl.jpg');
height:26px;
width:34px;
position:absolute;
border-top:1px solid gray;
border-left:1px solid gray;
}
.r_left-b {
background-image:url('images/bl.jpg');
height:26px;
width:34px;
position:absolute;
border-bottom:1px solid gray;
border-left:1px solid gray;
}
.r_middle-m {
background-image:url('images/bt.jpg');
background-repeat:repeat-x;
height:26px;
width:150px;
position:absolute;
margin-left:34px;
}
.r_middle-t {
background-image:url('images/bt.jpg');
background-repeat:repeat-x;
height:26px;
width:150px;
position:absolute;
margin-left:34px;
border-top:1px solid gray;
}
.r_middle-b {
background-image:url('images/bt.jpg');
background-repeat:repeat-x;
height:26px;
width:150px;
position:absolute;
margin-left:34px;
border-bottom:1px solid gray;
}
.r_right-m {
background-image:url('images/br.jpg');
height:26px;
width:34px;
position:absolute;
margin-left:184px;
}
.r_right-b {
background-image:url('images/br.jpg');
height:26px;
width:34px;
position:absolute;
margin-left:184px;
border-bottom:1px solid gray; 
border-right:1px solid gray;
}
.r_right-t {
background-image:url('images/br.jpg');
height:26px;
width:34px;
position:absolute;
margin-left:184px;
border-top:1px solid gray; 
border-right:1px solid gray;
}
.menuitem:hover .r_left-t {background-image:url('images/blh.jpg');height:26px;width:34px;}
.menuitem:hover .r_left-b {background-image:url('images/blh.jpg');height:26px;width:34px;}
.menuitem:hover .r_left-m {background-image:url('images/blh.jpg');height:26px;width:34px;}
.menuitem:hover .r_middle-t {background-image:url('images/bth.jpg');height:26px;width:150px;position:absolute;background-repeat:repeat-x;}
.menuitem:hover .r_middle-b {background-image:url('images/bth.jpg');height:26px;width:150px;position:absolute;background-repeat:repeat-x;}
.menuitem:hover .r_middle-m {background-image:url('images/bth.jpg');height:26px;width:150px;position:absolute;background-repeat:repeat-x;}
.menuitem:hover .r_right-t {background-image:url('images/brh.jpg');height:26px;width:34px;}
.menuitem:hover .r_right-b {background-image:url('images/brh.jpg');height:26px;width:34px;}
.menuitem:hover .r_right-m {background-image:url('images/brh.jpg');height:26px;width:34px;}
.mtxt {
position:absolute;
z-index:999;
vertical-align: middle;
margin-left:34px;
height:26px;
line-height:26px;
cursor:default;
min-width:100px;
}
</style>
<script type="text/Javascript">
document.onclick=function() { hp(); };
function context(event,thepop) {
var ev=ev || window.event;
var pop=document.getElementById(thepop);
var x,y

if (document.all) { //for ie
x=event.clientX + document.body.scrollLeft;
y=event.clientY + document.body.scrollTop;
alert("hi")
} else {
x=event.pageX;
y=event.pageY;
}
pop.style.left=(x+1)+"px";
pop.style.top=(y+1)+"px";
pop.style.display="block";
return false;
}
function hp() {
document.getElementById('mymenu').style.display = 'none';
}
document.oncontextmenu=function() { context(window.event,'mymenu'); return false; };
</script>
</head>
<body>
  <div id="mymenu" style="display:none;position:absolute;">
    <div class="menuitem" onclick="hp();">
      <div class="r_left-t r_left-b"></div><div class="r_middle-t r_middle-b"></div><div class="r_right-t r_right-b"></div></div>
      <div class="mtxt">
        My Menu Item
      </div>
    </div>
  </div>
</body>
</html>
I deeply appreciate any useful input, although I may not agree with it.
Now, hopefully I can get this project off the ground!

~Charles