Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to use div+css to achieve the effect of product classification menu imitating Taobao", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "how to use div+css to achieve imitation Taobao product classification menu effect" bar!

This is an imitation of Taobao product classification menu, CSS menu, mouse move up, show hidden part of the content, imitation Taobao menu, CSS and JS implementation, for product classification is very appropriate website menu, understand CSS can be their own optimization.

The screenshot of the running effect is as follows:

The online demo address is as follows:

Http://demo.jb51.net/js/2015/div-css-ftaobao-product-menu-codes/

The specific code is as follows:

The code is as follows:

Imitate the product classification menu of Taobao body {text-align:center;font-family: "Song style"; 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 # d8d8d8bossBorderRelativeFor 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: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 0pxash Word-wrap:break-word;word-break:break-all;}. Nav_head1 ul li {padding:1px 0px 0px 0pxmittLineWheightVl23pxTrue 10pxTrue 10pxTracy2pxltlefthandlleftWhiteMustCall spaceMorep} .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:visited {color:#333 Padding:0 1px 0 2px _ head1 li:hover ul,.Nav_head1 a:hover ul background _ head1 li:hover ul,.Nav_head1 a:hover ul;} .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} ASP source community forum news article blog diary message chat thief collection host domain name enterprise website CMS whole station music video other classification PHP source code Ajax related data management blog diary message chat news article plug-in module enterprise website CMS system music video other classification DELPHI source form design system related algorithm decompression Shrinking database-related text processing, graphics processing, other classification

At this point, I believe that everyone on "how to use div+css to achieve imitation Taobao product classification menu effect" have a deeper understanding, might as well to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.