<!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实现网上商城左侧垂直商品分类菜单的更多相关文章

  1. 纯css实现鼠标感应弹出二级菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 纯CSS实现带返回顶部右侧悬浮菜单

    这是我做个人网页的时候加上的带返回顶部右侧悬浮菜单效果,如下图, 使用工具是Hbuilder. 代码如下: <!DOCTYPE html> <html> <head> ...

  3. web中用纯CSS实现筛选菜单

    web中用纯CSS实现筛选菜单 本文我们来用纯css实现像淘宝宝贝筛选菜单那样的效果,例子虽然没有淘宝那样强大,不过原理差不多,如果花点心思也可以实现和淘宝一样的. 内容过滤是一个在Web上常见的一个 ...

  4. 纯CSS完美实现垂直水平居中的6种方式

    前言 由于HTML语言的定位问题,在网页中实现居中也不是如word中那么简单,尤其在内容样式多变,内容宽高不定的情况下,要实现合理的居中也是颇考验工程师经验的.网上讲居中的文章很多,但是都不太完整,所 ...

  5. 一款纯css实现的垂直时间线效果

    今天给大家分享一款纯css实现的垂直时间线效果.垂直时间线适合放在类似任务时间安排的网页上.该实现采用了蓝色作为主题色,界面效果还不错.一起看下效果图: 实现的代码. html代码: ... 阅读原文 ...

  6. 纯CSS 箭头流程，网上找的，留着备用

    无意之中看到一个纯CSS做的箭头导航(流程式),收藏一下,以备不时之需 实际效果 步骤一 步骤二 步骤三 步骤四 源代码: HTML: <div class="wrapper" ...

  7. 一个标签的72变，打造一个纯CSS图标库

    每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...

  8. 利用animation和text-shadow纯CSS实现loading点点点的效果

    经常在网上看到loading状态时的点点点的动态效果,自己也用JS写了一个,思路是使用一个计数参数,然后在需要添加点的元素后面利用setInterval一个一个加点,当计数到3时,把点变为一个--写完 ...

  9. 纯CSS实现侧边栏/分栏高度自动相等

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=694 一.为何要分栏高 ...

随机推荐

  1. 【UOJ#207】共价大爷游长沙

    题目链接 题目描述 火车司机出秦川,跳蚤国王下江南,共价大爷游长沙.每个周末,勤劳的共价大爷都会开车游历长沙市. 长沙市的交通线路可以抽象成为一个 \(n\) 个点 \(n−1\) 条边的无向图,点编 ...

  2. 【leetcode】Reaching Points

    题目如下: A move consists of taking a point (x, y) and transforming it to either (x, x+y) or (x+y, y). G ...

  3. linux运维、架构之路-LVS负载均衡

    一.LVS介绍 1.介绍           LVS是Linux Virtual Server的简写,是linux虚拟的服务器集群系统,可以在unix/linux平台下实现负载均衡集群功能,由章文嵩博 ...

  4. javascript 通用定义

    通用约定 注释 原则 As short as possible(如无必要,勿增注释):尽量提高代码本身的清晰性.可读性. As long as necessary(如有必要,尽量详尽):合理的注释.空 ...

  5. rk3328设备树学习

    一.用到的rk3328好像使用了设备树 设备树我知道的有三种文件类型,dtbs是通过指令make dtbs编译的二进制文件,供内核使用. 基于同样的软件分层设计的思想,由于一个SoC可能对应多个mac ...

  6. [洛谷2257]YY的GCD 题解

    整理题目转化为数学语言 题目要我们求: \[\sum_{i=1}^n\sum_{i=1}^m[gcd(i,j)=p]\] 其中 \[p\in\text{质数集合}\] 这样表示显然不是很好,所以我们需 ...

  7. 关于Idea热部署，修改代码不需要重启tomcat

  8. Apache2.4常用编译参数

    转载文章,亲试 Apache2.4以后的版本编译依赖apr,所以,编译之前需要先安装apr及apr-util. 编译参数只是一个参考作用,这个参数是我平常使用的,具体工作中的需求还是要区别对待的 一些 ...

  9. python 定时器，轮询定时器

    首先想要实现的效果是:每隔1段时间,就去调用1个接口确认结果,直到接口返回的结果为true,停止调用 所以这里会用到python的定时器 先来了解最简单的定时器: python 定时器默认定时器只执行 ...

  10. 【SVN】 一次SVN 修复笔记

    同事乱提交了一个版本之后,SVN上最新版本出现了问题. 原本按照网上其他人的说法,可以手动到服务器端干掉最新版的存档,并修改版本记录到前一个版本号即可,但是这应该是个坑. 掉进这个坑后,需要解决,又不 ...