这个效果是作为案例演示的一个效果。然后放到了店铺里面，很多小伙伴看到觉得喜欢。
所以这里米色免费将源码分享出来。有喜欢的小伙伴可以自己去测试下。
一：效果演示
大家可以复制代码在店铺测试，注意代码里面有图片，需要换成你店铺的图片才可以。
可以先复制代码里面的图片在浏览器打开，保存到电脑上，然后上传到图片空间再替换到代码里面测试预览
二：源码分享/*====整体导航====*/。皮肤-盒子-bd，1000 .全猫，全是猫。链接，皮肤盒bd .菜单列表。皮肤盒bd .菜单列表。菜单，皮肤盒bd .菜单列表。链接，皮肤盒bd .菜单列表。菜单-已选择。链接。标题{背景：透明；}。皮肤盒bd {font-family:微软雅黑；背景：# c7a462宽度：1200像素填充：0 360像素位置：相对；左：-485 px；}。皮肤-盒子-bd，1000 .全猫，全是猫。链接，皮肤盒bd .全是猫。标题，皮肤盒bd .菜单列表。皮肤盒bd .菜单列表。菜单，皮肤盒bd .菜单列表。链接，皮肤盒bd .菜单列表。菜单。标题{身高：70px行高：70px}。全猫{ _ width:125 px；最大宽度：125像素；背景-图片：URL(https://img。alicdn。com/img extra/i3/675431384/TB 2 qd 4 ejcfjpufjsszhxxabuvxa _！675431384 .png)；}。全是猫. link { width:85px；}。皮肤盒bd .全是猫。标题{颜色：透明；}
/*====右侧分类导航====*/。皮肤盒bd .菜单列表{ float:对；宽度：自动；}。皮肤盒bd .菜单列表。菜单标题{背景-图片：URL(https://img。alicdn。com/img extra/i4/675431384/TB 2 exv TJ 3 rkpufjy 1 zex xc。6 fxa _！675431384 .gif)；背景-重复：不重复；背景-位置：-150 px 50px；颜色：# fff}。皮肤盒bd .菜单列表。菜单。标题：悬停{背景-位置：左50px颜色：# 000;}。皮肤盒bd .菜单列表。菜单，全是猫。链接{ border:0；}
/*小图标-主要是配合导航效果，对图标位置做了调整*/。皮肤盒bd .全是猫。链接。弹出图标{位置：相对；左：60px}。皮肤盒bd .菜单列表。菜单。链接。弹出图标。皮肤盒bd .全是猫。链接。弹出图标{ margin-top:31px；}。皮肤盒bd .菜单列表。菜单-已选择。链接标题{ color:# 000；}。皮肤盒bd .菜单列表。菜单-已选择。链接标题{背景-图片：URL(https://img。alicdn。com/img extra/i4/675431384/TB 2 exv TJ 3 rkpufjy 1 zex xc。6 fxa _！675431384 .gif)；背景-重复：不重复；背景-位置：0-70px；}。皮肤盒bd .菜单列表。菜单选择：悬停。链接标题{背景-位置：0 50px}
/*====导航弹出====*/。菜单-弹出菜单-猫。子猫-悬停{背景：# 2f2f2f}。菜单-弹出菜单-猫。亚猫-悬停。猫名，皮肤盒bd .弹出内容。猫树。猫-高清-盘旋FST-cat-name { text-indent:17px；}。皮肤盒bd .菜单列表。菜单-已选择。链接。标题，皮肤盒bd .菜单列表。菜单。标题{过渡：所有缓入缓出。7s；-WebKit-过渡：所有放松-放松。7s；}。商店导航频道。菜单-弹出菜单-猫。亚猫-悬停，菜单-弹出菜单-猫。亚猫-悬停。猫名，皮肤盒bd .弹出内容。猫树。猫-高清-悬停，皮肤盒bd .弹出内容。猫树。猫-高清-盘旋fst-cat-name{过渡：所有缓入缓出。6s；-WebKit-过渡：所有放松-放松。6s；}
三：使用说明我店铺是基础版，所以用到天猫导航可能会有点改变，如果没有的话就忽视这条
为了方便小伙伴使用，特意把代码做了一些简单说明。这些说明可以直接复制到店铺，淘宝会自动过滤掉注释
代码中添加了图片，所以最好是先把图片传到你自己的图片空间替换掉，然后再测试效果
至于如何保存代码中的图，应该都会把。不会的话就复制图片地址下载或者在浏览器打开图片，右键保存图片
