溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“怎么用div+css實現仿淘寶的產品分類菜單效果”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“怎么用div+css實現仿淘寶的產品分類菜單效果”吧!
這是一款仿淘寶的產品分類菜單，CSS菜單，鼠標移上去，顯示隱藏部分內容，仿寫的淘寶網菜單，CSS和JS實現，用于產品分類中很合適的網站菜單，懂CSS的可自己優化。
運行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/div-css-ftaobao-product-menu-codes/
具體代碼如下：
代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>仿淘寶的產品分類菜單</title>
<style>
body {text-align:center;font-family:"宋體"; margin:0; padding:0;font-size:12px; color:#000;overflow-x:hidden}
div,form,img,ul,ol,li,dl,dt,dd {margin:0;padding:0;border:0;text-align:left;}
.Nav{border-top:2px solid #c00}
.Nav .Navlf{width:358px;float:left;display:inline;margin:0px;padding:0px;border:1px solid #d8d8d8;border-top:none;border-left:none;position:relative;}
.Navlf .Navleft{width:350px;float:left;display:inline;height:450px;margin:0px;margin-left:2px;padding:0px;}
.Navleft a:visited{color:#333}
.Nav_head1{margin:0px;position:relative;z-index:99;float:left;display:inline;}
.Nav_head1 li{padding:0px;position:relative;float:left; display:inline-block;height:auto;line-height:22px;}
.Nav_head1 a{padding:0 10px 0 0;display:block;color:#333}
.Nav_head1 a:hover{text-decoration:none;background:#fff}
.Nav_head1 :hover > a{color:#f60;text-decoration:none;background:#fff}
.Nav_head1 ul{border:2px solid #fff;border-top:0px;position:absolute;font:normal 12px/22px arial;display:inline;padding:0 0px 6px 0px;overflow:hidden;left:0; height:120px;width:273px;word-wrap:break-word;word-break:break-all;}
.Nav_head1 ul li{padding:1px 0px 0px 0px;line-height:23px;margin-left:10px;margin-right:-2px;left:left;white-space:nowrap}
.Nav_head1 ul li h4{ font-size:14px; font-weight:bold; margin:0; padding:0;}
.Nav_head1 table {position:absolute;top:0;left:0;}
.Nav_head1 ul a, .Nav_head1 ul a:visited {color:#333;padding:0 1px 0 2px;background:none;}
.Nav_head1 ul a:hover{color:#fff;background:#30528F;text-decoration:none;}
.Nav_head1 ul :hover > a {color:#fff;background:#30528F}
.Nav_head1 li:hover ul,.Nav_head1 a:hover ul{margin:-2px;display:inline;visibility:visible;height:auto;border:2px #c00 solid;padding:2px; background:#ffe}
</style>
</head>
<body>
<div class="Nav">
<div class="Navlf">
<div class="Navleft">
<div >
<ul id="menu" class="Nav_head1" >
<li id="cid_284"><a href="#"><!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul >
<li><h4><a href="#">ASP源碼</a></h4></li><li><a href="#">社區論壇</a></li><li><a href="#">新聞文章</a></li><li><a href="#">博客日記</a></li><li><a href="#">留言聊天</a></li><li><a href="#">小偷采集</a></li><li><a href="#">主機域名</a></li><li><a href="#">企業網站</a></li><li><a href="#">CMS整站</a></li><li><a href="#">音樂視頻</a></li><li><a href="#">其它分類</a></li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li><li id="cid_636"><a href="#"><!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul >
<li><h4><a href="#">PHP源碼</a></h4></li><li><a href="#">Ajax相關</a></li><li><a href="#">數據管理</a></li><li><a href="#">博客日記</a></li><li><a href="#">留言聊天</a></li><li><a href="#">新聞文章</a></li><li><a href="#">插件模塊</a></li><li><a href="#">企業網站</a></li><li><a href="#">CMS系統</a></li><li><a href="#">音樂視頻</a></li><li><a href="#">其它分類</a></li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li><li id="cid_291"><a href="#"><!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul >
<li><h4><a href="#">DELPHI源碼</a></h4></li><li><a href="#">窗體設計</a></li><li><a href="#">系統相關</a></li><li><a href="#">算法相關</a></li><li><a href="#">解壓壓縮</a></li><li><a href="#">數據庫相關</a></li><li><a href="#">文本處理</a></li><li><a href="#">圖形處理</a></li><li><a href="#">其它分類</a></li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li><li id="cid_509"><a href="#"></a></li></ul>
</div>
</div>
</div>
</div>
</body>
</html>到此，相信大家對“怎么用div+css實現仿淘寶的產品分類菜單效果”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
