纯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 一.为何要分栏高 ...
随机推荐
- 【Linux】CentOS6上安装Python3.7(config、make、make install)及“No module named '_ctypes'”/pip install时“ssl module in Python is not available.”的解决
1.下载安装包 https://www.python.org/ftp/python/ 该目录下选择所需要的版本进行下载.解压. wget https://www.python.org/ftp/pyth ...
- 【LuoguP2792 】[JSOI2008]小店购物(最小树形图)
题目链接 题目描述 小店的优惠方案十分简单有趣: 一次消费过程中,如您在本店购买了精制油的话,您购买香皂时就可以享受2.00元/块的优惠价:如果您在本店购买了香皂的话,您购买可乐时就可以享受1.50元 ...
- ES6 Module（模块）
1.export命令 一个模块就是一个独立的文件. 该文件内部的所有变量,外部无法获取. 如果你希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量. 下面是一个 JS 文件,里 ...
- jq元素左边距
获取页面某一元素的绝对X,Y坐标,可以用offset():var X = $(‘#DivID’).offset().top;var Y = $(‘#DivID’).offset().left; 获取相 ...
- ipcloud上传裁切图片，保存为base64再压缩传给后台
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...
- 跳马(Knight Moves), ZOJ1091, POJ2243 x
跳马(Knight Moves), ZOJ1091, POJ2243 题目描述: 给定象棋棋盘上两个位置 a 和 b,编写程序,计算马从位置 a 跳到位置 b 所需步数的最小值. 输入描述: 输入文件 ...
- 最短路（模板）【CodeChef CLIQUED，洛谷P3371】
自TG滚粗后咕咕咕了这么久,最近重新开始学OI,也会慢慢开始更博了.... 最短路算法经典的就是SPFA(Bellman-Ford),Dijkstra,Floyd: 本期先讲两个经典的单源最短路算法: ...
- D - Cheerleaders（第三周）
D - Cheerleaders 题目链接:https://vjudge.net/contest/154063#problem/D 题目大意: 给你一个 n∗m 的方格,现在有 k 个相同石子,我们要 ...
- fastjson学习笔记
先来说说什么是 JSON 吧. JSON:JavaScript对象表示法(JavaScript Object Notation).JSON 是存储和交换文本信息的语法.JSON 语法是 JavaScr ...
- gsxt滑动验证码
最后,谈谈滑动验证码. 目前,工商网站已经全面改版,全部采用了滑动验证码,上面绝大多数思路都失效了.对于滑动验证码,网上能搜到的解决方案基本都是下载图片,还原图片,算出滑动距离,然后模拟js来进行拖动 ...