商城导航

最近一直都在看慕课，看见些有意思的小特效也就在这记一下，今天看的是一款京东商城导航的，大体一看并不难，无论是C单一SS还是单一JS都不需要太多的逻辑，所以打算在这里记下来
先说一下CSS方面吧，很简单，主要是一些hover的应用，对CSS理解深一点的人大体都可以写出来，但
里面的一些小特效，小技巧还是让我眼前一亮，还是蛮有意思的，这次代码里还用的dl dt dd我以前几乎不用，看了视频后也是更多的了解了这个标签，发现以前总是用li标签，的确又不好解决的地方，也算是一些收获吧
下面附上主要的核心代码

<ul class="topmenu">        <div class="toptitle">全部商品分类</div>        <li><a href="#">图书、音像、数字产品</a><span></span>            <div class="submenu">                <div class="left-div">                    <dl>                        <dt><a href="#">电子书</a></dt>                        <dd><a href="#">免费</a><a href="#">励志与成功</a><a href="#">小说</a>                            <a href="#">婚恋</a><a href="#">文学</a><a href="#">经营</a>                        </dd>                    </dl>                </div>                <div class="right-div">                    右侧推荐品牌<br/>                    右侧推荐品牌<br/>                    右侧推荐品牌<br/>                    右侧推荐品牌<br/>                    右侧推荐品牌<br/>                    右侧推荐品牌<br/>                </div>            </div>        </li>    </ul>

CSS

//这是其中的鼠标划过事件.topmenu li a:hover{    text-decoration: underline;    font-weight: bold;    color: #e4393c;}.topmenu li:hover{    border:  1px solid #DDD;    border-right:0;    box-shadow: 0 0 8px #DDD;//发亮效果，用阴影做的，以前没试过，还不错    -moz-box-shadow:0 0 8px #DDD;//兼容    -webkit-box-shadow:0 0 8px #DDD;//兼容    background-image: none;//取消背景图片，，我以前取消都没想到这么简单的- -}.topmenu li:hover .submenu{    display: block;}.topmenu li:hover span{//这是一个小技巧吧，一会贴特效图，主要是做出了一个小白块，使左右导航连了起来//如下图    background: white;    display: inline-block;    z-index: 20;//层级最高    width: 20px;    height: 30px;    float: right;//浮动和相对缺一不可    position: relative;//}

如果用JS，我想大部分人已经想到了
无非就是mouseover和mouseout事件

window.onload=function(){    var lis=document.getElementsByTagName("li")    for (var i = 0; i < lis.length; i++) {        lis[i].onmouseover=function(){            this.className="lihover";        }        lis[i].onmouseout=function(){            this.className="";        }    };}

但我们需要把CSS中li：hover改为.lihover改为一个类，这样我们就可以用JS给他添加类属性了。