纯css实现网上商城左侧垂直商品分类菜单

<!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>

<title>纯css打造网上商城左侧垂直商品分类菜单_网页代码站(www.webdm.cn)</title>

<style>

body{font-size:14px; font-family:"\5B8B\4F53",san-serif;line-height:21px;text-align:left;}

body,div,ul,li,h1,h2,h3{padding:0;margin:0;}

ul, li{list-style:none;}

.clear{clear:both;}

.sidebar {background: #3B4053;border:1px solid #e6ebf1;width:190px;padding:5px;margin:30px 10px;}

.sidebar h2{color:#fff;font-size:14px;line-height:21px;text-align:center;padding:2px 0 7px;}

#menu {width:190px;background: #e6ebf1;padding:8px 0;}

#menu li{float:left;width:166px;display:block;padding-left:24px;background: #e6ebf1;position:relative;

line-height:21px;border:none;}

#menu li:hover {background: #3B4053;}

#menu li a {font-family:"\5B8B\4F53",san-serif;font-size:14px;color:#3B4053;display:block;outline:0;

text-decoration:none;padding:5px 0;}

#menu li:hover a {color:#fff;}

.dropdown_4columns{    margin:6px auto;float:left;position:absolute;left:-999em;text-align:left;

border-left:6px solid #3B4053; border-top:1px solid #3B4053;border-bottom:1px solid #3B4053;

border-right:1px solid #3B4053;width:510px;background: #e6ebf1;padding:5px 0 10px;}

#menu li:hover .dropdown_4columns{left:190px;top:-6px;}

.col_1 {width:120px;display:inline;float: left;position: relative;margin:0;}

.col_4 {width:510px;display:inline;float: left;position: relative;margin:0;}

#menu h3 {font-size:14px;font-weight:bold;color:#3B4053;margin:4px 0;padding-left:20px;

font-family:"\5B8B\4F53",san-serif;line-height:21px;font-size:12px;text-align:center;}

#menu li:hover div a {font-size:12px;color:#003366;}

#menu li:hover div a:hover {color:#e47911;}

#menu li ul {list-style:none;padding:0;margin:0;}

#menu li ul li {font-size:12px;line-height:21px;position:relative;padding:0 0 0 6px;

margin:0;text-align:left;width:120px; border-left:#ccc 1px solid;}

#menu li ul li a{padding:0 0 0 6px;margin:0;}

#menu li ul li:hover {background:none;padding:0 0 0 6px;margin:0;}

</style>

</head>

<body>

<div class="sidebar">

<h2>商品目录</h2>

<ul id="menu">

    <li><a href="/">时尚女包</a>

        <div class="dropdown_4columns">

            <div class="col_1">

                <h3>热门类目</h3>

                <ul>

                    <li><a href="/">城市风情系列</a></li>

                    <li><a href="/">羽绒潮包包</a></li>

                    <li><a href="/">菱格纹包包</a></li>

                </ul>

            </div>

            <div class="col_1">

                <h3>价格区间</h3>

                <ul>

                    <li><a href="/">100-300元</a></li>

                    <li><a href="/">300-500元</a></li>

                    <li><a href="/">500-1000元</a></li>

                    <li><a href="/">1000元以上</a></li>

                </ul>

            </div>

            <div class="col_1">

                <h3>促销活动</h3>

                <ul>

                    <li><a href="/">春节5折促销</a></li>

                    <li><a href="/">清仓促销一折起</a></li>

                    <li><a href="/">品牌降价促销</a></li>

                </ul>

            </div>

            <div class="col_1">

                <h3>推荐品牌</h3>

                <ul>

                    <li><a href="#">派克兰帝</a></li>

                    <li><a href="#">Bessie贝茜</a></li>

                    <li><a href="#">Adidas</a></li>

                    <li><a href="#">欧伦堡</a></li>

                </ul>

            </div>

        </div>

    </li><!-- End 4 columns Item -->

    <li><a href="/">精品男包</a>

         <div class="dropdown_4columns">

            <div class="col_1">

                <h3>热门类目</h3>

                <ul>

                    <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>

            </div>

            <div class="col_1">

                <h3>价格区间</h3>

                <ul>

                    <li><a href="/">100-300元</a></li>

                    <li><a href="/">300-500元</a></li>

                    <li><a href="/">500-1000元</a></li>

                    <li><a href="/">1000元以上</a></li>

                </ul>

            </div>

            <div class="col_1">

                <h3>促销活动</h3>

                <ul>

                    <li><a href="/">城市风情系列促销</a></li>

                    <li><a href="/">春节5折促销</a></li>

                    <li><a href="/">羽绒潮包优惠活动</a></li>

                    <li><a href="/">品牌降价促销</a></li>

                </ul>

            </div>

            <div class="col_1">

                <h3>推荐品牌</h3>

                <ul>

                    <li><a href="#">派克兰帝</a></li>

                    <li><a href="#">Bessie贝茜</a></li>

                    <li><a href="#">Adidas</a></li>

                    <li><a href="#">BeLLE百丽包</a></li>

                    <li><a href="#">欧伦堡</a></li>

                </ul>

            </div>

        </div>

    </li><!-- End 4 columns Item -->

    <li><a href="#">商务旅行包</a>

         <div class="dropdown_4columns">

            <div class="col_1">

                <h3>热门类目</h3>

                <ul>

                    <li><a href="/">城市风情系列</a></li>

                    <li><a href="/">经典高档丝巾包</a></li>

                    <li><a href="/">卡门微笑系列</a></li>

                    <li><a href="/">羽绒潮包包</a></li>

                </ul>

            </div>

            <div class="col_1">

                <h3>价格区间</h3>

                <ul>

                    <li><a href="/">100-300元</a></li>

                    <li><a href="/">300-500元</a></li>

                    <li><a href="/">500-1000元</a></li>

                    <li><a href="/">1000元以上</a></li>

                </ul>

            </div>

            <div class="col_1">

                <h3>促销活动</h3>

                <ul>

                    <li><a href="/">城市风情系列促销</a></li>

                    <li><a href="/">春节5折促销</a></li>

                    <li><a href="/">清仓促销一折起</a></li>

                    <li><a href="/">羽绒潮包优惠活动</a></li>

                    <li><a href="/">品牌降价促销</a></li>

                </ul>

            </div>

            <div class="col_1">

                <h3>推荐品牌</h3>

                <ul>

                    <li><a href="#">派克兰帝</a></li>

                    <li><a href="#">Bessie贝茜</a></li>

                    <li><a href="#">Adidas</a></li>

                    <li><a href="#">BeLLE百丽包</a></li>

                    <li><a href="#">欧伦堡</a></li>

                </ul>

            </div>

        </div>

    </li><!-- End 4 columns Item -->

    <li><a href="#">高档丝巾包</a>

         <div class="dropdown_4columns">

            <div class="col_1">

                <h3>热门类目</h3>

                <ul>

                    <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>

            </div>

            <div class="col_1">

                <h3>价格区间</h3>

                <ul>

                    <li><a href="/">100-300元</a></li>

                    <li><a href="/">300-500元</a></li>

                    <li><a href="/">500-1000元</a></li>

                    <li><a href="/">1000元以上</a></li>

                </ul>

            </div>

            <div class="col_1">

                <h3>促销活动</h3>

                <ul>

                    <li><a href="/">城市风情系列促销</a></li>

                    <li><a href="/">春节5折促销</a></li>

                    <li><a href="/">清仓促销一折起</a></li>

                    <li><a href="/">羽绒潮包优惠活动</a></li>

                    <li><a href="/">品牌降价促销</a></li>

                </ul>

            </div>

            <div class="col_1">

                <h3>推荐品牌</h3>

                <ul>

                    <li><a href="#">派克兰帝</a></li>

                    <li><a href="#">Bessie贝茜</a></li>

                    <li><a href="#">Adidas</a></li>

                    <li><a href="#">BeLLE百丽包</a></li>

                    <li><a href="#">欧伦堡</a></li>

                </ul>

            </div>

        </div>

    </li><!-- End 4 columns Item -->

    <li><a href="#">菱格纹包包</a>

         <div class="dropdown_4columns">

            <div class="col_1">

                <h3>热门类目</h3>

                <ul>

                    <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>

            </div>

            <div class="col_1">

                <h3>价格区间</h3>

                <ul>

                    <li><a href="/">100元以下</a></li>

                    <li><a href="/">100-300元</a></li>

                    <li><a href="/">300-500元</a></li>

                    <li><a href="/">500-1000元</a></li>

                    <li><a href="/">1000元以上</a></li>

                </ul>

            </div>

            <div class="col_1">

                <h3>促销活动</h3>

                <ul>

                    <li><a href="/">城市风情系列促销</a></li>

                    <li><a href="/">春节5折促销</a></li>

                    <li><a href="/">清仓促销一折起</a></li>

                    <li><a href="/">羽绒潮包优惠活动</a></li>

                    <li><a href="/">品牌降价促销</a></li>

                </ul>

            </div>

            <div class="col_1">

                <h3>推荐品牌</h3>

                <ul>

                    <li><a href="#">派克兰帝</a></li>

                    <li><a href="#">Bessie贝茜</a></li>

                    <li><a href="#">Adidas</a></li>

                    <li><a href="#">BeLLE百丽包</a></li>

                    <li><a href="#">欧伦堡</a></li>

                </ul>

            </div>

        </div>

<div class="clear"></div>

</ul>

</div>

</body>

</html>

效果图：

纯css实现网上商城左侧垂直商品分类菜单的更多相关文章

纯css实现鼠标感应弹出二级菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
纯CSS实现带返回顶部右侧悬浮菜单
这是我做个人网页的时候加上的带返回顶部右侧悬浮菜单效果,如下图, 使用工具是Hbuilder. 代码如下: <!DOCTYPE html> <html> <head> ...
web中用纯CSS实现筛选菜单
web中用纯CSS实现筛选菜单本文我们来用纯css实现像淘宝宝贝筛选菜单那样的效果,例子虽然没有淘宝那样强大,不过原理差不多,如果花点心思也可以实现和淘宝一样的. 内容过滤是一个在Web上常见的一个 ...
纯CSS完美实现垂直水平居中的6种方式
前言由于HTML语言的定位问题,在网页中实现居中也不是如word中那么简单,尤其在内容样式多变,内容宽高不定的情况下,要实现合理的居中也是颇考验工程师经验的.网上讲居中的文章很多,但是都不太完整,所 ...
一款纯css实现的垂直时间线效果
今天给大家分享一款纯css实现的垂直时间线效果.垂直时间线适合放在类似任务时间安排的网页上.该实现采用了蓝色作为主题色,界面效果还不错.一起看下效果图: 实现的代码. html代码: ... 阅读原文 ...
纯CSS 箭头流程，网上找的，留着备用
无意之中看到一个纯CSS做的箭头导航(流程式),收藏一下,以备不时之需实际效果步骤一步骤二步骤三步骤四源代码: HTML: <div class="wrapper" ...
一个标签的72变，打造一个纯CSS图标库
每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...
利用animation和text-shadow纯CSS实现loading点点点的效果
经常在网上看到loading状态时的点点点的动态效果,自己也用JS写了一个,思路是使用一个计数参数,然后在需要添加点的元素后面利用setInterval一个一个加点,当计数到3时,把点变为一个--写完 ...
纯CSS实现侧边栏/分栏高度自动相等
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=694 一.为何要分栏高 ...

随机推荐

javaScript中的 call 和 apply
call 和apply都可以实现函数的调用 // 普通函数的调用 function foo() { console.log('foo'); } foo(); // foo foo.call(); // ...
linux运维、架构之路-Kubernetes本地镜像仓库+dashboard部署
一.部署docker registry 生产环境中我们一般通过搭建本地的私有镜像仓库(docker registry)来拉取镜像. 1.拉取registry镜像 [root@k8 ...
CSS盒子模型（框模型）
一.如何理解盒子模型盒子模型(框模型)是css部分非常重要的一部分知识,CSS在处理网页的时候,认为每个元素都处在一个不可见的盒子中.盒子模型的构想,把所有的元素都想象成盒子,那么对网页进行布局 ...
如何在Web页面里使用高拍仪扫描上传图像
如何在Web页面里使用高拍仪扫描上传图像市场上所有的高拍仪都支持扫描图片并保存到本地,一般公司都会提供控件.开发人员只需要在页面集成就可以进行拍照和扫描.只不过一般扫描的图片是保存在本地固定的文件夹 ...
codeforces 868C - Qualification Rounds（构造）
原题链接:http://codeforces.com/problemset/problem/868/C 题意:有k个队伍参加比赛,比赛有n个预选的题目,有些队伍对已经事先知道了一些题目.问能不能选出若 ...
Activiti7入门(五)
1 创建流程首先选中存放图形的目录(本次我们选择 resources 下的 bpmn 目录),点击菜单: New-BpmnFile,如下图所示: 起完名字 holiday 后(默认扩展名为 bpmn ...
170929-关于md5加密
在各种应用系统中,如果需要设置账户,那么就会涉及到储存用户账户信息的问题,为了保证所储存账户信息的安全,通常会采用MD5加密的方式来,进行储存.首先,简单得介绍一下,什么是MD5加密. MD5的全称是 ...
Linux驱动开发6——DDR内存分配
1.kmalloc和kfree #include <linux/slab.h> void *kmalloc(size_t size, int flags); flag: GFP_ATOMI ...
ORACLE DG添加redo日志成员
ORACLE DG在线日志添加日志成员 SQL>select SEQUENCE#,first_time,next_time,APPLIED, THREAD# from v$archived_lo ...
Ajax，学习教程！
一.什么是Ajax? 2005 年Jesse James Garrett 发表了一篇文章,标题为:“Ajax:A new Approach to Web Applications”.他在这篇文章里介绍 ...

纯css实现网上商城左侧垂直商品分类菜单

纯css实现网上商城左侧垂直商品分类菜单的更多相关文章

随机推荐

热门专题