介绍 & lt; ! DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0,过渡//EN"
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"比;
& lt; html xmlns=癶ttp://www.w3.org/1999/xhtml"比;
& lt; head>
& lt; meta http-equiv=癈ontent-Type",内容=皌ext/html;, charset=gb2312"比;
& lt; title>仿淘宝的产品分类菜单& lt;/title>
& lt; style>
body {text-align:中心;字体类型:“宋体“,,保证金:0;,填充:0;字体大小:12 px;,颜色:# 000;overflow-x:隐藏}
div、形式、img、ul、ol, dl, dt, dd {保证金:0;填充:0;边界:0;text-align:左;}
.Nav {border-top: 2 px solid # c00}
.Nav .Navlf{宽度:358 px;浮动:左;显示:内联;保证金:0 px;填充:0 px;边界:1 px solid # d8d8d8; border-top:没有,border-left:没有,位置:相对;}
.Navlf .Navleft{宽度:350 px;浮动:左;显示:内联;高度:450 px;保证金:0 px; margin-left: 2 px;填充:0 px;}
.Navleft :访问{颜色:# 333}
.Nav_head1{保证金:0 px;位置:相对;z - index: 99;浮动:左;显示:内联;}
.Nav_head1 李{填充:0 px;位置:相对;浮动:左,,显示:inline-block;高度:汽车;行高:22 px;}
.Nav_head1 {填充:0,10 px 0, 0;显示:块;颜色:# 333}
.Nav_head1 :悬停{文字修饰:没有;背景:# fff}
.Nav_head1 : hover 祝辞,一个{颜色:#法郎;文字修饰:没有;背景:# fff}
.Nav_head1 ul{边界:2 px solid # fff; border-top: 0 px;位置:绝对;字体:normal 12 px/22 px 天线;显示:内联;填充:0,0 px 6 px 0 px;溢出:隐藏。左:0;,身高:120 px;宽度:273 px;自动换行:break-word;单词分割:打破所有;}
李.Nav_head1 ul {填充:1 px 0 px 0 px 0 px;行高:23 px; margin-left: 10 px; margin-right: 2 px;左:左;空白:nowrap}}
.Nav_head1 ul li h4{,字体大小:14 px;,粗细:大胆;,保证金:0;,填充:0;}
.Nav_head1 table {:绝对;:0;左:0;}
.Nav_head1 ul ,, .Nav_head1 ul 答:visited {颜色:# 333;填充:0,1 px 0, 2 px;背景:没有;}
.Nav_head1 ul :悬停{颜色:# fff;背景:# 30528 f;文字修饰:没有;}
.Nav_head1 ul : hover 祝辞,a {颜色:# fff;背景:# 30528 f}
.Nav_head1 李:hover ul, .Nav_head1 答:hover ul{保证金:2 px;显示:内联;可见性:可见;高度:汽车;边界:2 px # c00 固体;填充:2 px;,背景:# ffe}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div 类=癗av"祝辞
& lt;才能div 类=癗avlf"比;
,,,& lt; div 类=癗avleft"比;
,,,,,,& lt; div 比;
,,,,,,& lt; ul id=癿enu",类=癗av_head1",在,
,,,,,,& lt; li , id=癱id_284"祝辞& lt; https://www.yisu.com/zixun/a href=" # "> <表>
<李>/<李id=" cid_636 "> <表>
本篇内容主要讲解“怎么用div + css实现仿淘宝的产品分类菜单效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习”怎么用div + css实现仿淘宝的产品分类菜单效果”吧!
这是一款仿淘宝的产品分类菜单,CSS菜单,鼠标移上去,显示隐藏部分内容,仿写的淘宝网菜单,CSS和JS实现,用于产品分类中很合适的网站菜单,懂CSS的可自己优化。
运行效果截图如下:
在线演示地址如下:http://demo.jb51.net/js/2015/div-css-ftaobao-product-menu-codes/
具体代码如下:
代码如下:
