想做成天猫导航样子，不知道对不对

我加了过度效果，transition:0.3s。但是总感觉不出来效果，数值我也调大过，感觉没差别。还有老师看下我的DIV 结构错没，看下是用img标签做还是要用CCS 背景样式。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{ padding:0; margin:0;}
a{ text-decoration:none;}
ul{ list-style:none;}
.header{ width:100%; height:100px; background:#999999;}
.nav{ height:40px; width:100%; background:rgb(62,0,1);}
.nav ul{ width:980px; height:40px; background:rgb(221,31,31) ; margin:0 auto;}
.nav li{ float:left; position:relative;transition:0.3s; z-index:1; }
.nav li>a{ color:#fff; font-size:16px; text-align:center; line-height:40px; padding:0 30px; display:block;}
.nav li:hover>a{ background:rgb(221,39,39); color:#FFF}
.nav li a img{ display:none; transform:scale(0.5); position:absolute; top:0; left:0px; z-index:3}
.nav li:hover a>img{ display:block; top:-40px;}
.nav li .down{ width:150px; position:absolute; top:40px; left:0; display:none;}
.nav li .down a{ line-height:36px; color:#fff; display:block; padding-left:30px;
background:rgb(221,39,39); font-size:14px;}
.nav li:hover .down{ display:block}
</style>
</head>
<body>
<div class="header"></div>
<div class="nav">
<ul>
<li>
<a href="#">首页<img src="tianm_1.png" alt=""/></a>
<div class="down">
<a href="#">列表值</a>
<a href="#">列表值</a>
<a href="#">列表值</a>
<a href="#">列表值</a>
</div>
</li>
<li>
<a href="#">分类<img src="tianm_1.png" alt=""/></a>
<div class="down">
<a href="#">列表值</a>
<a href="#">列表值</a>
<a href="#">列表值</a>
<a href="#">列表值</a>
<a href="#">列表值</a>
<a href="#">列表值</a>
</div
></li>
<li>
<a href="#">案例展示
<img src="tianm_1.png" alt=""/></a>
<div class="down">
<a href="#">列表值</a>
<a href="#">列表值</a>
<a href="#">列表值</a>
<a href="#">列表值</a>
</div
></li>
<li>
<a href="#">练习我们<img src="tianm_1.png" alt=""/></a>
<div class="down">
<a href="#">列表值</a>
<a href="#">列表值</a>
</div
></li>
<li>
<a href="#">在线留言<img src="tianm_1.png" alt=""/></a>
</li>
</ul>
</div>
</body>
</html>

复制代码

韩文强 · 发表于 2016-11-28 19:51:57

是不是想要做出下滑菜单的效果啊，使用CSS是解决不了的，transition的过渡不能让display:block和display:none，有缓慢的过渡效果的，想要实现下滑菜单，就需要结合javascript的交互特效了。

[提问] 想做成天猫导航样子，不知道对不对

共1个回复最后回复于 2016-11-28 19:51

	B Color Image Link Quote Code Smilies 高级模式您需要登录后才可以回帖登录 \| 立即注册本版积分规则回帖后跳转到最后一页

[提问] 想做成天猫导航样子， 不知道对不对

共1个回复 最后回复于 2016-11-28 19:51

[提问] 想做成天猫导航样子，不知道对不对

共1个回复最后回复于 2016-11-28 19:51