首页

JS特效

CSS3特效

CSS的商城网站常用左侧分类下拉导航菜单代码

立即下载预览

<头>
<元字符集=“UTF-8”>
商城网站常用箭头分类导航菜单代码

<风格>
* { 边距：0；填充：0； }
主体{边距：0;填充：0；文本装饰：无；字体大小：14px； }
li { 列表样式：无； }
.menu { 宽度：1000px;高度：600 像素；边距：30px 自动；背景颜色：#ececec； }
.menu .menuTop { 背景颜色：#F10215;颜色：#fff；宽度：140px；高度：40px；左内边距：20px；行高：40px；光标：指针； }
.menu ul { 宽度：160px;背景颜色：#fff；边框：2px实线#F10215；框大小：边框框；位置：相对； }
.menu ul li { 高度：30px;左内边距：8px；文本对齐：左对齐；行高：30px；字体大小：13px；背景：url(image/1.png)无重复右； z 索引：2； }
.menu ul li a { 颜色：#7070770; }
.menu ul li a:hover { 颜色：红色；文本装饰：下划线；光标：指针； }
.menu ul li:hover { border: 1pxsolid #DDD;右边界：0；背景图像：无； }
.menu ul li:hover .submenu { 显示：块； }
.menu ul li:悬停跨度{宽度:30px;高度：30px；显示：内联块；背景颜色：#FFF；浮动：右； z 索引：100；位置：相对； }
.menu ul li .submenu { 位置：绝对；左：146 像素；顶部：0；宽度：720px；高度：300px；边框：1px实心#DDD；框阴影：0 0 8px #DDD； -moz-box-shadow：0 0 8px #DDD； -webkit-box-shadow: 0 0 8px #DDD;背景颜色：#FFF； z 索引：3；显示：无； }
.menu ul li .submenu .subleft { 左边距：0px;宽度：400px；高度：300px；向左飘浮;内边距：5px； }
.menu ul li .submenu .subleft dl { 溢出：隐藏；边框底部：1px实心#D1D1D1；内边距：10px 0； }
.menu ul li .submenu .subleft dl dt { float: left;高度：22px；行高：22px；右边距：10px；字体粗细：粗体；颜色：#707070；字体大小：12px；光标：指针； }
.menu ul li .submenu .subleft dl dd { }
.menu ul li .submenu .subleft dl dd a { 显示：块；向左飘浮;左边框：1px 实线#707070；内边距：0 5px；颜色：#707070；高度：14px；行高：14px；边距：3px 0；字体大小：11px； }
.menu ul li .submenu .subright { 宽度：310px;高度：300px；背景颜色：蓝色；向左飘浮; }
</风格>

</头>

全部商品分类

;
<ul>

<li> <a herf="javascript:;">一级标题 1</a> <span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>二级标题111</dt>
<dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>
</dl>
<dl>
<dt>二级标题</dt>
<dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>
</dl>
<dl>
<dt>二级标题</dt>
<dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>
</dl>
<dl>
<dt>二级标题</dt>
<dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>
</dl>
</div>
<div class="subright" style="background-color: antiquewhite"> </div>
</div>
</li>


<li> <a herf="javascript:;">一级标题 2</a> <span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>二级标题222</dt>
<dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>
</dl>
<dl>
<dt>二级标题</dt>
<dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>
</dl>
<dl>
<dt>二级标题</dt>
<dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>
</dl>
<dl>
<dt>二级标题</dt>
<dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题2</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:aquamarine"> </div>
</li>


<li> <a herf="javascript:;">一级标题 3</a> <span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>二级标题333</dt>
<dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>
</dl>
<dl>
<dt>二级标题</dt>
<dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>
</dl>
<dl>
<dt>二级标题</dt>
<dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>
</dl>
<dl>
<dt>二级标题</dt>
<dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题3</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:cadetblue"> </div>
</li>


<li> <a herf="javascript:;">一级标题 4</a> <span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>二级标题444</dt>
<dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>
</dl>
<dl>
<dt>二级标题</dt>
<dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>
</dl>
<dl>
<dt>二级标题</dt>
<dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>
</dl>
<dl>
<dt>二级标题</dt>
<dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题4</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:darkgrey"> </div>
</li>


<li> <a herf="javascript:;">一级标题 5</a> <span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>二级标题555</dt>
<dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>
</dl>
<dl>
<dt>二级标题</dt>
<dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>
</dl>
<dl>
<dt>二级标题</dt>
<dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>
</dl>
<dl>
<dt>二级标题</dt>
<dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题5</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:darkseagreen"> </div>
</li>


<li> <a herf="javascript:;">一级标题 6</a> <span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>二级标题666</dt>
<dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>
</dl>
<dl>
<dt>二级标题</dt>
<dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>
</dl>
<dl>
<dt>二级标题</dt>
<dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>
</dl>
<dl>
<dt>二级标题</dt>
<dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题6</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:lavender"> </div>
</li>


<li> <a herf="javascript:;">一级标题 7</a> <span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>二级标题777</dt>
<dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>
</dl>
<dl>
<dt>二级标题</dt>
<dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>
</dl>
<dl>
<dt>二级标题</dt>
<dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>
</dl>
<dl>
<dt>二级标题</dt>
<dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题7</a> </dd>
</dl>
</div>
<div class="subright"> </div>
</li>


<li> <a herf="javascript:;">一级标题 8</a> <span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>二级标题888</dt>
<dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>
</dl>
<dl>
<dt>二级标题</dt>
<dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>
</dl>
<dl>
<dt>二级标题</dt>
<dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>
</dl>
<dl>
<dt>二级标题</dt>
<dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题8</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:lightseagreen"> </div>
</li>
<li> <a herf="javascript:;">一级标题 9</a> <span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>二级标题999</dt>
<dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>
</dl>
<dl>
<dt>二级标题</dt>
<dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>
</dl>
<dl>
<dt>二级标题</dt>
<dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>
</dl>
<dl>
<dt>二级标题</dt>
<dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题9</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:mistyrose"> </div>
</li>


<li> <a herf="javascript:;">一级标题 10</a> <span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>二级标题1010</dt>
<dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>
</dl>
<dl>
<dt>二级标题</dt>
<dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>
</dl>
<dl>
<dt>二级标题</dt>
<dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> </dd>
</dl>
<dl>
<dt>二级标题</dt>
<dd> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题</a> <a href="javascript:;">三级标题10</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:salmon"> </div>
</li>

</ul>

</div>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

这是一款比较简单的利用css鼠标悬停属性来制作商城网站常用左侧分类下拉导航菜单代码。

免责声明

本站所有资源均由网友贡献或各大下载网站转载。请自行检查软件的完整性！本站所有资源仅供学习参考。请不要将它们用于商业目的。否则，一切后果由您负责！如有侵权，请联系我们删除。联系方式：admin@php.cn

如何熟练运用CSS3特效提升网页的用户体验

09 Sep 2023

如何熟练运用CSS3特效提升网页的用户体验随着互联网的发展，网页设计和用户体验成为了网站开发中的重要环节。而CSS3特效的应用，可以为网页增添动感和视觉效果，提升用户体验。本文将介绍几种常见的CSS3特效及其代码示例，帮助开发者更加熟练地运用CSS3特效，提升网页的用户体验。过渡效果（Transition）过渡效果是CSS3中最基本的特效之一，通过改变某个属