Div not showing Hover function correctly

Div not showing Hover function correctly

I have two div's inside of a containing div.
The first of the two will have a word used as a menu item and the second
will hold a background color.
I created a hover style for the background that will change the opacity of
that div when the menu item is moused over.
My problem is that hover is only enabled when the mouse is right on the
edges of the div. As soon as my mouse moves a little into the interior of
the div, it reverts back to the original opacity.
My style:
.menuItemBG {
width:100%;
text-align: center;
background-color:#4281b6;
height:100%;
/* These three lines are for transparency in all browsers. */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
filter: alpha(opacity=10);
opacity:.1;
position: absolute;
}
.menuItemBG:hover {
width:100%;
text-align: center;
background-color:#4281b6;
height:100%;
/* These three lines are for transparency in all browsers. */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
filter: alpha(opacity=20);
opacity:.2;
position: absolute;
}
.menuItemTitle{
position:relative;
color:#000;
line-height: 27px;
font-size: 14px;
margin-left: 20px;
}
HTLML:
<div style="position:relative; width:208px; height:30px;">
<div class="menuItemBG"></div>
<div class="menuItemTitle">Test Item</div>
</div>
Can't seem to pinpoint my error.