CSS操纵2级菜单动态性出現不仅有js才可以保证

日期:2021-03-07 类型:科技新闻 

关键词:快速建站,网站建设系统,免费网页建站,网站免费建设,建站系统

1直觉得2级菜单的出現实际效果仅有js才可以操纵,今日科学研究了1下阿里巴巴巴巴网站的主页,才发现,原先2级菜单的动态性显示信息还可以应用CSS来操纵,原先对CSS是静态数据的物品1直是误会它了,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/-⑴00008999">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>

CSS编码:

拷贝编码
编码以下:

<span style="font-size:18px;"><strong>.ls-cate li div{
display:none;
position:absolute;
z-index:2;
left:190px;
top:⑴px;
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>

源代码免费下载详细地址