为什么菜单的背景颜色不变？该如何解决
日期：2014-05-16 浏览次数：20786 次
为什么菜单的背景颜色不变？
我做了一个横向菜单，当鼠标移到菜单上时菜单背景变红色。但我发现第2个菜单(prod2)是正常的,第1个菜单(prod1)不正常。区别是我只是把第一个菜单放到了一个div里面以便箭头往下移一点，但不知道为何它的背景颜色却不变。在此附上源码，我研究了2天没有发现问题，请高手帮我看一下，谢谢。
我做了一个横向菜单，当鼠标移到菜单上时菜单背景变红色。但我发现第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">
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
