求指导，关于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

<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) {