我做了一个横向菜单，当鼠标移到菜单上时菜单背景变红色。但我发现第2个菜单(prod2)是正常的,第1个菜单(prod1)不正常。区别是我只是把第一个菜单放到了一个div里面以便箭头往下移一点，但不知道为何它的背景颜色却不变。在此附上源码，我研究了2天没有发现问题，请高手帮我看一下，谢谢。
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>prod menus</title>
<style>
ul.hMenu {
margin: 0;
padding: 0;
z-index: 1;
}
ul.hMenu > li {
margin: 0;
padding: 0;
list-style: none;
float: left;
width:140px;
}
ul.hMenu li a {
display: block;
text-align: left;
text-decoration: none
}
ul.hMenu li > div {
position: absolute;
display: none;
}
ul.hMenu div a {background: yellow;
}
div.lay1{ float:left;}
div.lay1 br{line-height:50%}
.topMenu{font:bold 12px arial;color:#169e39;text-decoration: none;}
.secondMenu{font:12px arial;color:#000000;text-decoration: none;}
.arrow_box {
position: relative;
background: red;
border: 4px solid #c2e1f5;
}
.arrow_box:after, .arrow_box:before {
bottom: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(149, 213, 53, 0);
border-bottom-color: red;
border-width: 13px;
left: 10%;
margin-left: -13px;
}
.arrow_box:before {
border-color: rgba(194, 225, 245, 0);
border-bottom-color: #c2e1f5;
border-width: 19px;
left: 10%;
margin-left: -19px;
}
</style>
<script>
function showMenu(obj){
var a=obj.children[0];
a.style.color="blue";
var div = obj.children[1];
obj.style.backgroundColor="yellow";
div.style.display="block";
}
function hideMenu(obj){
var a=obj.children[0];
a.style.color="red";
var div = obj.children[1];
div.style.display="none";
obj.style.backgroundColor="";
}
</script>
</head>
<body>
<ul class="hMenu">
<li onmouseover="showMenu(this);" onmouseout="hideMenu(this);">
<a style="color: red;" href="javascript:void(0);">prod</a>
<div><br/>
<!-- here-->
<div class="arrow_box" >
<div class="lay1">
<div><a href="" class="topMenu">Manage Content</a><br><a href="" class="secondMenu"> Message </a></div>
<br><br>
<div><a href="" class="topMenu">Manage Assignment</a><br><a href="" class="secondMenu"> User Inquiry</a></div>
</div>
</div>
</div>
</li>
<li onmouseover="showMenu(this);" onmouseout="hideMenu(this);">
<a style="color: red;" href="javascript:void(0);">prod2</a>
<div class="arrow_box">
<div class="lay1">
<div><a href="" class="topMenu">Manage Content</a><br><a href="" class="secondMenu"> Message </a><br><a href="" class="secondMenu"> Help </a></div>