js如何再添加一个下拉菜单呢？html

js如何再添加一个下拉菜单呢？html

除了html代码<a></a>没有关闭  你的逻辑有点乱
htm导航栏是
<li><a href="" ></a></li><!--a标签要关闭 -->
<li><a href="></a></li><!--a标签要关闭 -->
<li>
    <a href="></a>  <!--a标签要关闭 -->
   <div class="nav-list" id="dataTd" style="display: none;">
       <a href=“">人物角色</a>
       <a href="">游戏视频</a>
   </div>  
</li>html文件中有id为dataTd但是没有dataTh


js是


<script type="text/javascript">
    var oDiv1=document.getElementById('dataTh');
    //获取ID 为dataTh的html元素
    var oDiv2=document.getElementById('dataTd');
    //获取ID 为dataTd的html元素
     var timer=null;
//onmouseover代表鼠标划入指定范围  触发事件
      oDiv2.onmouseover=oDiv1.onmouseover=function ()
    {
        clearTimeout(timer);
        oDiv2.style.display='block';
        oDiv1.className='data-list';
这几句代码的意思是  当鼠标指向id为dataTh或者id为dataTd的元素，触发id为dataTd的元素显示，id为dataTh的元素添加类名为“data-list”的class类
    };
//onmouseout代表鼠标离开指定范围  触发事件
    oDiv2.onmouseout=oDiv1.onmouseout=function ()
    {
        timer=setTimeout(function (){
            oDiv2.style.display='none';id为dataTd的元素隐藏
            oDiv1.className='';id为dataTh的元素去掉类名为“data-list”的class类
        }, 100);
每0.1秒执行一次
    };
</script>

我给你举个例子
要实现的功能是  当鼠标划过列表中的id="dataTh"的元素时，隐藏的子菜单显示
html页面
<li>
    <a href=" id="dataTh"></a>  
<!--子菜单  以下处于隐藏状态 -->
    <div class="nav-list" id="dataTd" style="display: none;">
       <a href=“">人物角色</a>
       <a href="">游戏视频</a>
    </div>  
<!--子菜单  以上处于隐藏状态 -->
</li>JS
<script type="text/javascript">
    var oDiv1=document.getElementById('dataTh');
    //获取ID 为dataTh的html元素
    var oDiv2=document.getElementById('dataTd');
    //获取ID 为dataTd的html元素
     var timer=null;
//onmouseover代表鼠标划入指定范围  触发事件
    oDiv1.onmouseover=function ()
    {
        clearTimeout(timer);
        oDiv2.style.display='block';
        oDiv1.className='data-list';
//这几句代码的意思是  当鼠标指向id为dataTh的元素，触发id为dataTd的元素显示，id为dataTh的元素添加类名为“data-list”的class类
    };
//onmouseout代表鼠标离开指定范围  触发事件
    oDiv1.onmouseout=function ()
    {
        oDiv2.style.display='none';//id为dataTd的元素隐藏
        oDiv1.className='';//id为dataTh的元素去掉类名为“data-list”的class类
    };
</script>

事例：