css制作仿商城侧边导航
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.clear{
clear:both;
}
ul{
list-style: none;
padding:0;
}
a{
display: block;
text-decoration: none;
} .h03_c01 {
width:100px;
height:auto; }
.h03_cli{
transition: all .8s;
width:100px;
height:30px;
text-align: center;
line-height: 30px;
background: #FFCC99;
color: #FFFFFF;
}
.h03_cli:hover{
background:#FFFFCC ;
}
.h03_cli:hover>a{
color:#0000FF;
}
.h03_cli>a{
color: #FFFFFF; }
.h03_cli:hover .list_right{
display: block;
left:108px;
}
.list_right{
width:auto;
height:240px;
background: #FFFFCC;
display: none;
position: absolute;
left: 150px;
top: 16px;
}
.list_right li{
float: left;
width:auto;
margin-top: 10px;
margin-left: 10px; }
.list_right h4{
float: left;
width:100px;
height:20px;
color: #080808;
}
.list_right h4 a{
color: #000;
}
.list_right ul{
height:auto;
}
.title{
float: left;
}
.content{ width:auto;
line-height: 30px;
height:30px;
margin-top: 20px;
margin-left: 10px;
float: left;
border-bottom:1px dashed #00BFFF;
margin-right: 15px;
}
.content a{
color:#FF6700;
float: left;
width:auto;
margin-left: 10px;
line-height: 25px;
}
.content a:hover{
color: #0000FF;
}
span{
float: right;
}
</style>
</head>
<body>
<div class="h03_c">
<ul class="h03_c01">
<li class="h03_cli"><a href="">计划</a>
<div class="list_right">
<div class="content-box">
<div class="title">
<h4>标题1<span>></span></h4>
</div>
<div class="content">
<a href="">内容</a>
<a href="">内容</a>
<a href="">内容</a>
<a href="">内容</a>
<a href="">内容</a>
<a href="">内容</a>
<a href="">内容</a>
<a href="">内容</a>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="title">
<h4>标题2<span>></span></h4>
</div>
<div class="content">
<a href="">内容</a>
<a href="">内容</a>
<a href="">内容</a>
<a href="">内容</a>
<a href="">内容</a>
<a href="">内容</a>
<a href="">内容</a>
<a href="">内容</a>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="title">
<h4>标题3<span>></span></h4>
</div>
<div class="content">
<a href="">内容</a>
<a href="">内容</a>
<a href="">内容</a>
<a href="">内容</a>
<a href="">内容</a>
<a href="">内容</a>
<a href="">内容</a>
<a href="">内容</a>
<div class="clear"></div>
</div>
</div> </div>
</li>
<li class="h03_cli"><a href="">你好</a>
<div class="list_right">
<ul>
<li>
<a href="">内容2</a>
</li>
<li>
<a href="">内容223</a>
</li>
<li>
<a href="">内容22</a>
</li>
<li>
<a href="">内容22</a>
</li>
</ul>
</div>
</li>
<li class="h03_cli"><a href="">总结</a>
<div class="list_right">
<ul>
<li>
<a href="">内容3</a>
</li>
<li>
<a href="">内容33</a>
</li>
<li>
<a href="">内容3</a>
</li>
<li>
<a href="">内容3</a>
</li>
</ul>
</div>
</li>
<li class="h03_cli"><a href="">统计</a>
<div class="list_right">
<ul>
<li>
<a href="">内容3</a>
</li>
<li>
<a href="">内容33</a>
</li>
<li>
<a href="">内容3</a>
</li>
<li>
<a href="">内容3</a>
</li>
</ul>
</div>
</li>
<li class="h03_cli"><a href="">分布</a>
<div class="list_right">
<ul>
<li>
<a href="">内容4</a>
</li>
<li>
<a href="">内容4</a>
</li>
<li>
<a href="">内容4</a>
</li>
<li>
<a href="">内容4</a>
</li>
</ul>
</div>
</li>
<li class="h03_cli"><a href="">流程</a>
<div class="list_right">
<ul>
<li>
<a href="">内容5</a>
</li>
<li>
<a href="">内容55</a>
</li>
<li>
<a href="">内容5</a>
</li>
<li>
<a href="">内容5</a>
</li>
</ul>
</div>
</li>
<li class="h03_cli"><a href="">工作</a>
<div class="list_right">
<ul>
<li>
<a href="">内容6</a>
</li>
<li>
<a href="">内容66</a>
</li>
<li>
<a href="">内容6</a>
</li>
<li>
<a href="">内容6</a>
</li>
</ul>
</div>
</li>
<li class="h03_cli"><a href="">向上</a>
<div class="list_right">
<h4>标题fff <span>></span></h4>
<ul>
<li>
<a href="">内容7</a>
</li>
<li>
<a href="">内容77</a>
</li>
<li>
<a href="">内容7</a>
</li>
<li>
<a href="">内容7</a>
</li>
<div class="clear"></div>
</ul>
</div>
</li>
</ul>
</div> </body>
</html>
css制作仿商城侧边导航的更多相关文章
- jquery仿天猫商城左侧导航菜单
之前看到有博友写了一个仿天猫商城左侧导航菜单,可惜不提供免费下载,也没有代码.以前自己也写过类似的效果,只是都是一小块一小块的,现在重新拼凑.我将一步一步的实现拼凑过程,希望对你有所帮助. Demo在 ...
- （转）jquery仿天猫商城左侧导航菜单
原文地址:http://www.cnblogs.com/WinKi/p/3398824.html 之前看到有博友写了一个仿天猫商城左侧导航菜单,可惜不提供免费下载,也没有代码.以前自己也写过类似的效果 ...
- css制作漂亮彩带导航条菜单
点击这里查看效果:http://keleyi.com/keleyi/phtml/divcss/17.htm 效果图: 以下是源代码: <!DOCTYPE html PUBLIC "-/ ...
- CSS制作一个简单网页的下拉导航栏
网页下拉导航栏的制作 网页下拉导航栏的制作很简单,只需要运用好CSS中伪选择器. 首先说明几个简单的伪选择器(比较常用的): link:连接平常的状态 visited:连接被访问过之后 hover:鼠 ...
- css制作最简单导航栏
css制作最简单导航栏
- 【源码分享】jquery+css实现侧边导航栏
jquery+css实现侧边导航栏 最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看 ...
- 如何使用纯CSS制作特效导航条？
先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...
- CSS3学习-用CSS制作立体导航栏
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 商城分类导航实现 （css)
代码实例:demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- 利用CSS制作背景变色的横向导航栏
1.表单 页面如下: <html> <head> <title>注册表单页面</title> </head> <body> &l ...
随机推荐
- Java面向对象之回顾方法及加深
回顾方法及加深 方法的定义 修饰符 返回类型 break和return的区别 1.break:跳出switch,结束循环 2.return:代表方法结束,返回一个结果 方法名:注意规范.见名知意 参数 ...
- oracle通过计划任务备份表
1.先手动创建表 create table user01_backup_20210204 select * from user01 commit; 2.清空表 truncate table user0 ...
- redis之五种基本数据类型
五种基本数据类型 redis存储任何类型的数据都是以key-value形式保存,并且所有的key都是字符串,所以讨论基础数据结构都是基于value的数据类型 常见的5种数据类型是:String.Lis ...
- js导出数据为excel表
1.接口数据后端写, 2.代码如下: var params={ "filters":[ {"propertyCode":"sequenceNo&quo ...
- java的jvm学习
- Python学习笔记（三）数据类型转换
一.输入输出函数 1.input() 输入函数,内置函数,用来获取用户输入数据,返回值为字符串 运行到此函数会阻塞或暂停程序 示例: 1 str_data = input('请输入数据:') 2 st ...
- Android版本历史
版本 Code Name 代号 API 日期 NDK 1.0 Astro 铁臂阿童木 1 1.1 Bender, Petit Four 发条机器人 2 1.5 Cupcake 纸杯 ...
- windows terminal用ssh连接已重装的服务器提示REMOTE HOST IDENTIFICATION HAS CHANGED!
连接过程提示: @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @ WARNING: REMOTE HOST IDENTIFIC ...
- 基于winds10 安装docker 踩坑记录
1.官方下载 https://www.docker.com/ 2.根据提示安装 并重庆计算机3.双击运行 报 Docker Desktop is shutting down 提示 计算机c: 盘 A ...
- JAVA学习笔记-10
String类: 字符串是一个特殊的对象.字符串最大的特点:一旦被初始化就不可以被改变. String类适用于描述字符串事物.那么它就提供了多个方法对字符串进行操作. 常见的操作: 1.获取: int ...