以京东为例简单无延迟菜单实现（一）

以京东为例简单无延迟菜单实现（菜单大致结构）

从页面上看，主要由两个菜单组成，当鼠标移动到主菜单上时，子菜单便会显示，这种显示显然是具有无延迟性

• 对于主菜单采用一个div包含内容，并采用无序列表ul

 <div class="demo1">
        <ul>
            <li data-id="a">
                <span>家用电器</span>
            </li>
            <li data-id="b">
                <span>手机/运营商/数码</span>
            </li>
            <li data-id="c">
                <span>电脑/办公</span>
            </li>
            .......
        </ul>
 </div>

记录一笔：data-* 属性来嵌入自定义数据，*为名字，可以与本身自带的属性名相同，如id，data-只是一个前缀标志

为了和网页中效果一致，代码修改：

<li data-id="a">
   <span>家用电器</span>
</li>
<li data-id="b">
    <a class="cate_menu" href="#">手机</a>
    <span>/</span>
    <a class="cate_menu" href="#">运营商</a>
    <span>/</span>
    <a class="cate_menu" href="#">数码</a>
</li>

• 完成主菜单的排布后，便是对于子菜单的处理，在网页效果中很显然，子菜单一开始是未显示状态，只有在鼠标移动到主菜单上时才会显示，从而想到样式中 display:none 的显示效果，故这里可以采用对子菜单添加一个none属性的类，使其在最初时不显示，但当鼠标移动到主菜单相应栏目上时，通过脚本处理dom相应标签，移除该none属性，从而达到显示子菜单的效果

<div id="sub" class="none">
    <div id="a" class="sub_content none">
         <dl>
             <dt>
                 <a href="#">电视<i>&gt;</i></a>
             </dt>
             <dd>
                 <a href="#">合资品牌</a>
                 <a href="#">国资品牌</a>
                 <a href="#">互联网品牌</a>
             </dd>
         </dl>
         <dl>
             <dt>
                 <a href="#">空调<i>&gt;</i></a>
             </dt>
             <dd>
                 <a href="#">挂壁式空调</a>
                 <a href="#">柜式空调</a>
                 <a href="#">中央空调</a>
             </dd>
         </dl>
     </div>
 </div>