                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /商城分类导航效果

请老师帮我看看到底哪里出了问题，为啥用CSS和JS做出来的效果不一样，用 lis[i].onmouseout = function (){ this.className = ""; }之后二级菜单隐藏了，一级菜单也没有任何效果了

HTML部分：

<dl class="shopclass_item">
              <dt><a href="#" class="b">手机</a> <a href="#" class="b">数码</a> <a href="#" class="aLink">合约机</a></dt>
              <dd><a href="#">荣耀3X</a> <a href="#">单反</a> <a href="#">智能设备</a></dd>
              <div id="shopclass_list">
              <div class="shopclass_cont">
               <dl id="shoplist_item">
                 <dt>电脑整机</dt>
                 <dd><a href="#">笔记本</a><a href="#">超极本</a><a href="#">上网本</a><a href="#">平板电脑</a><a href="#">台式机</a></dd>
               </dl>
               <dl id="shoplist_item">
                 <dt>装机配件</dt>
                 <dd><a href="#">CPU</a><a href="#">硬盘</a><a href="#">SSD固态硬盘</a><a href="#">内存</a><a href="#">显示</a><a href="#">器智能显示器</a><a href="#">主板</a><a href="#">显卡</a><a href="#">机箱</a><a href="#">电源</a><a href="#">散热器</a><a href="#">刻录机/光驱</a><a href="#">声卡</a><a href="#">拓展卡</a><a href="#">服务器配件</a><a href="#">DIV小附件</a><a href="#">装机/配件安装</a></dd>
               </dl>
               <dl id="shoplist_item">
                 <dt>整机附件</dt>
                 <dd><a href="#">电脑包</a><a href="#">电脑桌</a><a href="#">电池</a><a href="#">电源适配器</a><a href="#">贴膜</a><a href="#">清洁用品</a><a href="#">笔记本散热器</a><a href="#">USB拓展</a><a href="#">平板配件</a><a href="#">特色附件</a><a href="#">插座网线/电话线</a><a href="#">影音线材</a><a href="#">电脑线材</a></dd>
               </dl>
               <dl id="shoplist_item">
                 <dt>电脑外设</dt>
                 <dd><a href="#">鼠标</a><a href="#">键盘</a><a href="#">游戏外设</a><a href="#">移动硬盘</a><a href="#">摄像头</a><a href="#">高清播放器</a><a href="#">外置盒</a><a href="#">移动硬盘包</a><a href="#">手写板/绘图板</a></dd>
               </dl>
               <dl id="shoplist_item">
                 <dt>网络设备</dt>
                 <dd><a href="#">路由卡</a><a href="#">网卡</a><a href="#">3G无线上网</a><a href="#">交换机</a><a href="#">网络存储</a><a href="#">布线工具</a><a href="#">网络配件</a><a href="#">正版软件</a></dd>
               </dl>
               <dl id="shoplist_item">
                 <dt>音频设备</dt>
                 <dd><a href="#">音箱</a><a href="#">耳机/耳麦</a><a href="#">麦克风</a><a href="#">声卡</a><a href="#">音频附件</a><a href="#">录音笔</a></dd>
               </dl>
               <ul class="fangkuai fl">
                   <li><a href="#">电脑整机频道</a><img src="images/icon/右箭头.png" width="5" height="8"/></li>
                   <li><a href="#">硬件/外设频道</a><img src="images/icon/右箭头.png" width="5" height="8"/></li>
               </ul>
              </div>
              </div>
           </dl>

CSS部分：

.shopclass_show dl:hover {
    background-color:#FFF;
    padding:13px 10px;
    border-top:1px solid #5AA1FE;
    border-bottom:1px solid #3487F2;
    line-height:1.5;
    border-left:#4593FD solid 1px;
    border-right:0px;
    }
.shopclass_show dl:hover dt{
    background:none;
    }
.shopclass_show dl:hover .aLink{
    width:48px;
    height:20px;
    line-height:20px;
    background:url(../images/icon/aLink.png) left center no-repeat;
    display:inline-block;
    text-align:center;
    text-decoration:underline;
    font-size:12px;
    color:#FFF;
    }
.shopclass_show dl:hover a{
    color:#000;
    }

 /*鼠标移动到上面时的样式*/
.shopclass_show dl:hover #shopclass_list{
    display:block;
    }
 /*悬浮层样式*/

JS部分：