纯css实现鼠标经过图层时弹出下拉菜单显示效果，鼠标移开后自动隐藏起来，需要制作这个特效的朋友可参考其css代码。
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312"/>
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>仿淘宝网店纯css鼠标感应弹出下拉菜单效果_武鸣人</title>
<style type="text/css">
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}body,button,input,select,textarea{font:12px/1.5 tahoma,arial,\5b8b\4f53;}h1,h2,h3,h4,h5,h6{font-size:100%;}address,cite,dfn,em,var{font-style:normal;}code,kbd,pre,samp{font-family:courier new,courier,monospace;}small{font-size:12px;}ul,ol{list-style:none;}a{text-decoration:none;}a:hover{text-decoration:underline;}#site-nav,#site-nav .quick-menu li,#site-nav .search .menu-hd s,#site-nav .quick-menu .cart s,#site-nav .search .menu-bd button{background:transparent url(/img/20240427_www_wuming_ren_6.png) no-repeat 999em 0;}#site-nav{background-repeat:repeat-x;background-position:0 -44px;width:auto;min-width:950px;}#site-nav-bd{position:relative;width:950px;margin:0 auto;height:22px;line-height:22px;margin:0 auto;padding:2px 0;z-index:10000;color:#000;}.H{color:#f50!important;}#header,#bd,#content .layout,.eshop #hd .box,#footer{width:950px;margin:0 auto;}.col-main{float:left;width:100%;min-height:1px;}.col-sub,.col-extra{float:left;}.layout:after,.main-wrap:after,.col-sub:after,.col-extra:after,.box:after{content:'\20';display:block;height:0;clear:both;}.layout,.main-wrap,.col-sub,.col-extra,.box{*zoom:1;}#wangpu-copyright{padding:10px 0;text-align:center;}.grid-s5m0 .main-wrap{margin-left:200px;}.grid-s5m0 .col-sub{width:190px;margin-left:-100%;}.ks-imagezoom-lens{background:url("/img/20240427_www_wuming_ren_2.png") repeat scroll 0 0 transparent;cursor:move;z-index:1;}.ks-imagezoom-viewer{border:1px solid #CCC;overflow:hidden;text-align:center;z-index:999;}.ks-imagezoom-loading{background:url(/img/20240427_www_wuming_ren_3.gif) no-repeat scroll center center #FFF;}.ks-imagezoom-icon{height:23px;width:23px;border-right:1px solid #999;border-bottom:1px solid #999;background:url(/img/20240427_www_wuming_ren_4.png) no-repeat scroll left top transparent;z-index:2;}.clear,.tb-clear,.tb-clearfix{*zoom:1;}.clear:after,.tb-clear:after,.tb-clearfix:after{content:'\20';display:block;height:0;clear:both;}.hidden,.tb-hidden{display:none;}#page #logo .sub-logo{display:none;}.grid-s5m0 .main-wrap{margin-left:200px;}#related-items .pic a{*font-size:140px;}#related-items .desc{padding-top:5px;}#bd .exemption-clause{margin-top:30px;}#shop-search .shop-text,#shop-search button,#shop-search b,#shop-search label,#shop-info .shop-other a,#shop-rank-popup b{background:url(/img/20240427_www_wuming_ren_5.png) no-repeat;}#shop-head:after,#shop-search form:after,#shop-info .shop-service:after,#shop-info .shop-details:after,#shop-info .shop-other:after{clear:both;content:'\20';display:block;visibility:hidden;height:0;}#shop-head{height:68px;padding:18px 0 0 240px;}#shop-logo{position:relative;z-index:1;float:left;width:230px;height:70px;overflow:hidden;margin:-10px 0 0 -240px;_display:inline;_margin-bottom:-70px;}#shop-logo .tshop,#shop-logo .myshop{position:absolute;top:0;z-index:10;height:58px;background-color:#fff;opacity:0;filter:alpha(opacity=0);-ms-filter:alpha(opacity=0);}#shop-logo .tshop{left:2px;width:146px;}#shop-logo .myshop{left:151px;width:35px;}#shop-logo p{display:table-cell;width:230px;height:70px;overflow:hidden;vertical-align:middle;*display:block;}#shop-logo img,#shop-logo b{display:block;}#shop-logo b{width:230px;height:70px;}.custom-logo #shop-logo a{width:230px;}#shop-head .clear{clear:none;}#shop-head .shop-wrap{display:inline;float:left;width:100%;}#shop-search{height:48px;margin:0 0 0 278px;background-color:rgba(242,242,242,0.7);border:1px solid #E5E5E5;border-left:0;border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;-webkit-border-radius:0 3px 3px 0;filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#b2f2f2f2',EndColorStr='#b2f2f2f2');}#shop-search form{position:relative;z-index:1;margin:12px 144px 0 12px;*zoom:1;}#shop-search .shop-text,#shop-search label{cursor:text;}#shop-search .shop-text{float:right;width:100%;height:20px;padding:2px 0 1px;text-indent:5px;border:1px solid #9B9F9F;background-color:#fff;background-position:0 -151px;background-repeat:repeat-x;_float:none;_margin-top:-1px;}#shop-search label{position:absolute;top:3px;left:8px;z-index:2;padding-left:20px;color:#BABABA;background-position:-139px -34px;}#shop-search .focus label{visibility:hidden;}#shop-search button{position:absolute;top:0;right:-139px;z-index:1;width:70px;height:25px;font-weight:700;cursor:pointer;color:#585858;background-position:-69px -77px;border:none;}#shop-search .searchtb{right:-69px;color:#fff;background-position:-69px 0;}#shop-search button:hover,#shop-search .instore .hover{background-position:-69px -101px;}#shop-search .searchtb:hover,#shop-search .global .hover{background-position:-69px -25px;}#shop-search .searchmy:active{background-position:-69px -126px;}#shop-search .searchtb:active{background-position:-69px -50px;}#shop-search b{position:absolute;top:0;left:-3px;z-index:1;width:4px;height:25px;overflow:hidden;background-position:-143px 0;}#shop-info{position:relative;z-index:120;float:left;width:278px;margin:0 0 0 -100%;}#shop-info .shop-info-simple{height:44px;padding:4px 0 0 10px;background-color:rgba(249,249,249,0.8);border:1px solid #E7E7E7;border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#ccf9f9f9',EndColorStr='#ccf9f9f9');}#shop-info .shop-info-simple div{position:relative;z-index:2;filter:alpha(opacity=100);}#shop-info .shop-info-simple a{font-weight:700;color:#666;}#shop-info .shop-rank{display:block;}#shop-info .shop-rank .rank-icon{display:inline;float:left;}#shop-info .shop-ensure{display:inline;float:right;margin-right:12px;}#shop-info .arrow-wrap{position:absolute;right:50%;bottom:-9px;z-index:1000;width:30px;height:8px;border:1px solid #E7E7E7;border-top-color:#fff;background:#fff;}#shop-info .shop-arrow{position:absolute;left:11px;z-index:130;bottom:0;width:0;height:0;font-size:0;line-height:0;-webkit-transition:-webkit-transform .2s ease-in;-moz-transition:-moz-transform .2s ease-in;-o-transition:-o-transform .2s ease-in;transition:transform .2s ease-in;border:4px solid transparent;_border-color:#f9f9f9;border-top-color:#666;}#shop-info:hover .arrow-wrap,#shop-info.hover .arrow-wrap{bottom:0;*bottom:3px;_bottom:2px;border-top-color:#E7E7E7;border-bottom-color:#fff;}#shop-info:hover .shop-arrow,#shop-info.hover .shop-arrow{top:5px;top:0\9;transform:rotate(180deg);transform-origin:50% 20%;-moz-transform:rotate(180deg);-moz-transform-origin:50% 20%;-webkit-transform:rotate(180deg);-webkit-transform-origin:50% 20%;-o-transform:rotate(180deg);-o-transform-origin:50% 20%;filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);}#shop-info:hover .shop-info-simple,#shop-info.hover .shop-info-simple{background-color:#f9f9f9;box-shadow:2px 2px 2px #999;-moz-box-shadow:2px 2px 2px #999;-webkit-box-shadow:2px 2px 2px #999;filter:progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=3);}#shop-info:hover .shop-info-details,#shop-info.hover .shop-info-details{visibility:visible;}#shop-info img{vertical-align:middle;}#shop-rank-popup{display:none;position:absolute;z-index:1000;left:10px!important;top:50px!important;width:124px;padding:8px;border:1px solid #FEC701;background-color:#fff;}#shop-rank-popup .shop-date{color:#999;}#shop-rank-popup em{color:#f66;}#shop-rank-popup b{position:absolute;z-index:1;top:-7px;left:20%;width:11px;height:7px;margin-left:-6px;background-position:-139px -55px;}#shop-info .shop-info-details{visibility:hidden;position:absolute;z-index:999;top:49px;left:0;width:256px;padding:5px 10px 0;background-color:#F9F9F9;border:1px solid #E7E7E7;border-radius:0 0 3px 0;-moz-border-radius:0 0 3px 0;-webkit-border-radius:0 0 3px 0;box-shadow:2px 2px 2px #999;-moz-box-shadow:2px 2px 2px #999;-webkit-box-shadow:2px 2px 2px #999;filter:progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=3);}#shop-info .shop-info-details a:hover{text-decoration:none;}#shop-info .shop-rate,#shop-info .shop-service,#shop-info .shop-details{padding:6px 0;border-bottom:1px dashed #d2d2d2;*zoom:1;}#shop-info .shop-safe{padding:0 0 6px;border-bottom:1px dashed #d2d2d2;}#shop-info .shop-rate a{color:#545454;}#shop-info .shop-rate .compare{margin-left:15px;font-weight:normal;color:#808080;}#shop-info .shop-rate li{margin:5px 0 0;line-height:15px;}#shop-info .shop-rate em{font-size:12px;font-weight:700;color:#B31102;}#shop-info .shop-rate em.count{color:#3366de;}#shop-info .shop-rate em.lower{color:#217311;}#shop-info .shop-rate .rateinfo{color:#B31102;cursor:pointer;}#shop-info .shop-rate b{display:inline-block;height:15px;margin:0 5px 0 13px;padding:1px 2px 1px 3px;vertical-align:bottom;font-weight:normal;color:#fff;background:#B31102;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;*padding-top:2px;}#shop-info .shop-rate b.lower{border-color:#217311;background:#217311;}#shop-info .shop-service li{display:inline;float:left;height:30px;margin:5px 13px 0 0;line-height:27px;}#shop-info .shop-attach{padding-top:5px;overflow:auto;}#shop-info .shop-attach li{display:inline;float:left;}#shop-info .shop-attach .goodrate,#shop-info .shop-attach .setuptime{width:140px;}#shop-info .shop-other{padding:6px 0 0;}#shop-info .shop-other a{display:inline;float:left;width:69px;height:25px;margin:0 10px 6px 0;text-indent:-999px;}#shop-info .shop-other .tb-feed{background-position:0 -50px;}#shop-info .shop-other .tb-shared{background-position:0 -101px;}#shop-info .shop-other .tb-more{display:inline;float:right;width:85px;margin:0;text-align:right;background-image:none;}
</style>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<div id="site-nav">
<div id="site-nav-bd"></div>
</div>
<div align="center" id="dingtong" style="display:none;"></div>
<div id="header">
<div id="shop-head">
<h1 id="shop-logo">
<p>
<!--[if lte IE 6]><style>#shop-logo b {_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=image,src="/img/20240427_www_wuming_ren_7.png")}#shop-logo .logo-img{display:none}</style><b></b><![endif]-->
<img class="logo-img" src="/img/20240427_www_wuming_ren_7.png" />
<a class="tshop" href="https://www.wuming.ren"></a>
<a class="myshop" href="https://wuming.ren"></a>
</p>
</h1>
<div class="clear">
<div class="shop-wrap">
<div id="shop-search">
<form id="J_TBSearchForm" action="http://search.taobao.com/search">
<label for="shop-q">想找什么宝贝?</label>
<input type="text" id="shop-q" name="q" autocomplete="off" class="shop-text" />
<input type="hidden" name="searcy_type" value="item" />
<input type="hidden" value="newHeader" name="s_from">
<input type="hidden" name="source">
<input type="hidden" name="ssid" value="s5-e" />
<input type="hidden" name="search" value="y" />
<span class="instore">
<button class="searchmy" type="button">搜本店</button>
</span>
<span class="global">
<button class="searchtb" type="submit">搜淘宝</button>
</span>
<b class="shop-radius-l"></b>
</form>
</div>
</div>
<div id="shop-info">
<div class="shop-info-simple">
<a class="hCard fn" href="https://www.wuming.ren">mycpp</a>
<span class="J_WangWang"></span>
<span class="shop-rank">
<a href="https://www.wuming.ren" target="_blank" class="rank-icon" id="shop-rank"><img src="/img/20240427_www_wuming_ren_8.gif" border="0" align="absmiddle" class="rank" /></a></span>
</div>
<b class="arrow-wrap"><i class="shop-arrow"></i></b>
<div class="shop-rank-popup" id="shop-rank-popup" style="display: none; position: absolute; top: 67px; left: 1105px;">
<b></b>
<p class="shop-date">从 2008/01/01 起至今</p>
<p>虚拟宝贝交易: <em>100%</em></p>
<p>实物宝贝交易: <em>0%</em></p>
</div>
<div class="shop-info-details">
<div class="shop-rate">
<h4>店铺动态评分
<span class="compare">与同行业相比</span>
</h4>
<ul>
<li>
描述相符：<a target="_blank" href="https://www.wuming.ren"><em class="count" title="5.0分">5.0</em>
<span class="rateinfo" title="计算规则:(同行业平均分-店铺得分)/(同行业平均分-同行业店铺最低得分)">
<b>高于</b><em>100.00%</em>
</span>
</a>
</li>
<li>
服务态度：<a target="_blank" href="https://www.wuming.ren"><em class="count" title="5.0分">5.0</em>
<span class="rateinfo" title="计算规则:(同行业平均分-店铺得分)/(同行业平均分-同行业店铺最低得分)">
<b>高于</b><em>100.00%</em>
</span>
</a>
</li>
<li>
发货速度：<a target="_blank" href="https://www.wuming.ren"><em class="count" title="5.0分">5.0</em>
<span class="rateinfo" title="计算规则:(同行业平均分-店铺得分)/(同行业平均分-同行业店铺最低得分)">
<b>高于</b><em>100.00%</em>
</span>
</a>
</li>
</ul>
</div>
<div class="shop-service">
<h4>服务</h4>
<ul>
<li>
<a href="https://www.wuming.ren" target="_blank">
<img src="/img/20240427_www_wuming_ren_9.gif?1235" border="0" align="absmiddle" alt="支付宝实名认证" title="支付宝实名认证">
</a>
</li>
</ul>
</div>
<div class="shop-details">
<h4>店铺信息</h4>
<ul class="shop-attach">
<li class="goodrate"><span>好评率：</span>100.00%</li>
<li><span>宝贝数量：</span>475</li>
<li class="setuptime"><span>创店时间：</span>2010-10-13</li>
<li id="J_SCollCount"></li>
</ul>
</div>
<div class="shop-other">
<a class="tb-fav J_PopupTrigger collection xshop_sc J_TDialogTrigger" href="https://www.wuming.ren">收藏</a>
<a class="tb-feed subscribe-rss J_SubscribeRss J_TDialogTrigger" title="订阅后可持续关注该产品的价格、评论更新。" href="https://www.wuming.ren"><i></i>订阅</a>
<a class="tb-shared share-jianghu" href="https://www.wuming.ren" target="_blank"><i></i>分享</a>
<a class="tb-more" href="https://www.wuming.ren" target="_blank">查看更多评价></a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>本文来自武鸣人网站，转载请注明出处