最简 shee 今天 -i med styles popu --
一直觉得二级菜单的出现效果仅仅有 js 才干控制。今天研究了一下阿里巴巴站点的首页,才发现,原来二级菜单的动态显示也能够使用 CSS 来控制,原来对 CSS 是静态的东西一直是误解它了,CSS 也能够实现动态的效果,现把主要代码展演示样例如以下:
html 代码:
- <span style="font-size:18px;">
- <strong>
- <!DOCTYPE html>
- <html>
- <link href="1_files/a.css" rel="stylesheet" type="text/css" media="all">
- <div class="ls-cate" data-spm="1997230041">
- <ul>
- <li>
- <a href="http://www.alibaba.com/Agriculture_p1">
- Agriculture
- </a>
- <div>
- <span class="title">
- Agriculture
- </span>
- <a href="http://www.alibaba.com/Rice_pid10106">
- Rice
- </a>
- <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 class="more" href="http://www.alibaba.com/Agriculture_p1">
- See all categories
- </a>
- </div>
- </li>
- </ul>
- </div>
- </body>
- </html>
- </strong>
- </span>
- <span style="font-size:18px;"><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>
http://bbs.csdn.net/topics/390817010?page=1#post-397617443
源代码下载地址:
http://download.csdn.net/detail/zkn_cs_dn_2013/7527703
CSS 之实现二级菜单动态出现
来源: http://www.bubuko.com/infodetail-2149540.html