CSS控制二级菜单动态出现不只有js才能做到

摘要：一直认为二级菜单的出现效果只有js才能控制，今天研究了一下阿里巴巴网站的首页，才发现，原来二级菜单的动态显示也可以使用CSS来控制，原来对C...

一直认为二级菜单的出现效果只有js才能控制，今天研究了一下阿里巴巴网站的首页，才发现，原来二级菜单的动态显示也可以使用CSS来控制，原来对CSS是静态的东西一直是误解它了，CSS也可以实现动态的效果，现把主要代码展示如下：

HTML代码：

<html>

<ul>

<li>

<a href="http://www.alibaba.com/Agriculture_p1">Agriculture</a>

<div>

<span>Agriculture</span>

<a href="http://www.alibaba.com/Apples_pid10301">Apples</a>

<a href="http://www.alibaba.com/Olive-Oil_pid20606">Olive Oil</a>

<a href="http://www.alibaba.com/catalogs/--100008999">Herbal Cigars & Cigarettes</a>

<a href="http://www.alibaba.com/Plant-Animal-Oil_pid136">Plant & Animal Oil</a>

<a href="http://www.alibaba.com/Agriculture_p1">See all categories</a>

</div>

</li>

</ul>

</div></body></html></strong></span>

CSS代码：

<span><strong>.ls-cate li div{

display:none;

position:absolute;

z-index:2;

left:190px;

top:-1px;

border:1px solid #DDD;

background-color:#FFF;

box-shadow:3px 3px 6px #C2C2C2

}

.ls-cate li div .title,.ls-cate li div a{

display:block;

background-color:#FFF

}

.ls-cate li:hover div{

display:block

}

</strong></span>

源码下载地址