鼠标经过a盒子显示b盒子？（js）

遇到一个问题，就是鼠标经过1688，盒子不显示。

分析：可能是鼠标经过的行为被阻止了。或者是哪个冒泡了。（可能被一级栏目的A 阻止了）

解决：不用display:none;/block;组合，用js：

<div class="header_top">

<div class="inbox wrap clearfix">   

    <div class="phone">服务热线：<span>400-8766-928 &nbsp; 0769-82816585</span></div>

    <div class="lang">

        <a href="https://guangdonggelin.1688.com/?spm=a2615.2177701.autotrace-topNav.1.63295174OubGsk" class="lang_albb" target="_blank" id="login-btn">

        <span class="top_nav_1688">1688店</span>

        </a>

        <dl class="dl_1688" id="login-box">

    

                            <dd style="height: 40px;"><a href="http:baidu.com" style="padding: 0 10px;">下拉菜单1</a></dd>

                            <dd style="height: 40px;"><a href="http:baidu.com" style="padding: 0 10px;">下拉菜单1</a></dd>

                            <dd style="height: 40px;"><a href="http:baidu.com" style="padding: 0 10px;">下拉菜单1</a></dd>

        </dl>

        <a href="/index.php?lang=cn" class="lang_cn"><span>中文版</span></a>

        <a href="/index.php?lang=en" class="lang_en"><span>English</span></a>

    </div>

</div>

</div>

<script>

    (function(){

      var btn = document.getElementById('login-btn');

      var box = document.getElementById('login-box');

      var timer = null; 

      box.onmouseover = btn.onmouseover = function(){

        if(timer) clearTimeout(timer)

          box.style.display = 'block';

      }

      box.onmouseout = btn.onmouseout = function(){

        timer = setTimeout(function(){

          box.style.display = 'none';

        },400);

     

      }

    })();

    </script>

 

css:

.header_top{ height:40px; line-height:40px; overflow:hidden; background:#008ed8}

.header_top .phone{ float:left; font-size:14px; color:#fff; background:url(../icon_phone.png) no-repeat center left; padding-left:20px;}

.header_top .phone span{ font-size:20px;  font-family:'ttRegular'}

.header_top .lang{ float:right;}

.header_top .lang a{ display:block; float:left; font-size:14px; color:#fff; text-transform:capitalize; padding-left:30px; height:40px;}

.header_top .lang a.lang_cn{ background:url(../lang_cn.png) no-repeat center left; position:relative; padding-right:12px; margin-right:12px;}

.header_top .lang a.lang_cn:before{ content:""; display:block; 1px; height:10px; background:#4db0e4; position:absolute; right:0; top:50%; margin-top:-5px;}

.header_top .lang a.lang_en{ background:url(../lang_en.png) no-repeat center left}

.header_top .lang a.lang_albb{ background:url(../albb.png) no-repeat center left;position:relative; padding-right:12px; margin-right:12px;}

.header_top .lang a.lang_albb:before{ content:""; display:block; 1px; height:10px; background:#4db0e4; position:absolute; right:0; top:50%; margin-top:-5px;}

.top_nav_1688{position: relative;}

.dl_1688{position: absolute;top: 40px;z-index: 9;display: none; background-color: #008ed8; 87px;}