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