求指点，关于iframe和div的onmouseover事件

求指导，关于iframe和div的onmouseover事件
先上代码：
<div class="menu">
  <div>菜单一
  <iframe scrolling="no" frameborder="0"></iframe>
  <div id="L1" onmouseover="getcss()" onmouseout="outcss()">选项1</div>
  <div id="L1" onmouseover="getcss()" onmouseout="outcss()"> 选项1</div>
  <div id="L1" onmouseover="getcss()" onmouseout="outcss()">选项1</div>
  <div id="L1" onmouseover="getcss()" onmouseout="outcss()">选项1</div>
  <div id="L1" onmouseover="getcss()" onmouseout="outcss()">选项1</div>
  </div>
</div>

js:
var id_s;
function onmouseover(){
 var id=window.event.srcElement.id;
 id_s=document.getElementById(id).style;
 id_s.color="#f00";
}
function onmouseout(){
 id_s.color="";
 }

代码大致如上，因为页面上有大量grid控件，grid的优先级太高，无论div的z-index设置多少都无法遮盖grid，于是想到使用iframe放在菜单底层。虽然解决了div的菜单不被grid遮挡，但iframe却影响了 onmouseover的鼠标事件无法被触发。请问有什么办法解决？至今不明白放在div底层的iframe为什么为使div的onmouseover事件无法触发。


[解决办法]
li的ID一样了，而且事件名称都不对吧，getcss/outcss != onmouseover/onmouseout

HTML code

<div class="menu">  <div>菜单一  <iframe scrolling="no" frameborder="0"></iframe>  <div id="L1" onmouseover="getcss(this)" onmouseout="outcss(this)">选项1</div>  <div id="L1" onmouseover="getcss(this)" onmouseout="outcss(this)"> 选项1</div>  <div id="L1" onmouseover="getcss(this)" onmouseout="outcss(this)">选项1</div>  <div id="L1" onmouseover="getcss(this)" onmouseout="outcss(this)">选项1</div>  <div id="L1" onmouseover="getcss(this)" onmouseout="outcss(this)">选项1</div>  </div></div><script>    var id_s;    function getcss(o) {        o.style.color = "#f00";    }    function outcss(o) {        o.style.color = "";    }</script>