自己写的一段代码，间歇性提示有错误

Question

<script type="text/javascript">
    function displaySubMenu(li) {
        var subMenu = li.getElementsByTagName("ul")[0];
       subMenu.style.display="block"
    }
    function hideSubMenu(li) {
        var subMenu = li.getElementsByTagName("ul")[0]; 
        subMenu.style.display = "none";
    } 
</script> 
<ul class="Menu_03"> 
    <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
    <a href="http://www.cjc.edu.cn/">学院首页</a> 
    </li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
<a href="Index_1.aspx">基地首页</a> 
</li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
<a href="Base_Research.aspx">基地概况</a> 
<ul> 
<li><a href="#">基地简介</a></li> 
<li><a href="Base_rule.aspx">基地制度</a></li> 
<li><a href="#">基地成员</a></li> 
<li><a href="Blogrolls.aspx">联系我们</a></li> 
</ul> 
</li> 
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
<a href="#">企业新闻</a> 
<ul>
<li><a href="#">企业新闻</a></li>
<li><a href="#">基地公告</a></li>
</ul>
</li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
<a href="#">基地文化</a> 
<ul> 
<li><a href="#">基地图书</a></li> 
<li><a href="#">技术交流</a></li> 
</ul> 
</li> 
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
<a href="#">产品展示</a> 
</li> 
</ul> 之前的是这段，间歇性提示我无法获得属性style的值，对象为null或未定义。试着在不需要下拉的li下面添加内容则不提示错误，但是我不需要这地方有内容。自己就又加了点判断，错误倒是不报了，但是个人感觉写的有错误
改过的内容：<script type="text/javascript">
    function displaySubMenu(li) {
        var subMenu = li.getElementsByTagName("ul")[0];
        if (li == 'null') {
            subMenu.style.display = "none"
        }
        else {
            subMenu.style.display = "block";
        }
    }
    function hideSubMenu(li) {
        var subMenu = li.getElementsByTagName("ul")[0]; 
        subMenu.style.display = "none";
    } 
</script> 
<ul class="Menu_03"> 
    <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
    <a href="http://www.cjc.edu.cn/">学院首页</a> 
    </li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
<a href="Index_1.aspx">基地首页</a> 
</li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
<a href="Base_Research.aspx">基地概况</a> 
<ul> 
<li><a href="#">基地简介</a></li> 
<li><a href="Base_rule.aspx">基地制度</a></li> 
<li><a href="#">基地成员</a></li> 
<li><a href="Blogrolls.aspx">联系我们</a></li> 
</ul> 
</li> 
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
<a href="#">企业新闻</a> 
<ul>
<li><a href="#">企业新闻</a></li>
<li><a href="#">基地公告</a></li>
</ul>
</li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
<a href="#">基地文化</a> 
<ul> 
<li><a href="#">基地图书</a></li> 
<li><a href="#">技术交流</a></li> 
</ul> 
</li> 
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
<a href="#">产品展示</a> 
</li> 
</ul> 

Answer 1

1:没有子菜单的li就不要绑定事件：onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"2：处理时判断是否对象存在，即判断是否有子菜单function displaySubMenu(li) {
    var subMenu = li.getElementsByTagName("ul")[0];
    if(subMenu){
        subMenu.style.display="block";
    }
}
function hideSubMenu(li) {
    var subMenu = li.getElementsByTagName("ul")[0];  
    if(subMenu){
        subMenu.style.display="none";
    }
}