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 ...
随机推荐
- maven项目pom.xml报未找到指定路径文件
解决方法: 错误环境:Tomcat7 + Eclipse + Maven + Spring + SpringMvc + Mybatis 错误描述: 错误解决步骤: 1.找到eclipse的projec ...
- git prior sync failed; rebase still in progress
方案一: 将这个git直接删掉,rm common/ -rf 然后再回到项目根目录repo sync 方案二: git rebase --abort
- 关于CMDB
关于CMDB: CMDB运维管理平台是由CMDB开发团队,针对目前服务器运维.监控,批量管理提出的一个开源. 易用.实用的跨平台服务器运维管理平台. 统筹来说cmdb就是将已有的规则化运维技术规则到运 ...
- python接口测试常见问题。
一.入参问题 1.body字段类型 1.如果数据是从excel提取的那么中文数据会提示错误. 解决方法# media_value['body'] = media_value['body'].encod ...
- 记一次修改dotnet-cnblogs图片路径的正则匹配规则
大佬的GitHub 前言 因为最近一时心血来潮,学了markdown,我觉得但凡是个人,对于不用word或html就可以有不错的排版,而且使用起来简单便捷,都会投向markdown的怀抱中的.又因 ...
- Linux配置文件和网络常用命令总结
Linux应用配置大全 Linux网络基本配置 最小化安装的话是没有ifconfig命令的需要使用yum search ifconfig查找,然后yum install net-tools.x86_6 ...
- 一个好的程序应该像AK47
一个好的程序应该像AK47: 容易上手(配置.设置.功能描述清晰),结构简单(低耦合,模块化,单元化),拆装方便(安装部署.卸载.迁移很少有障碍),从不卡壳(已知业务冲突解决),故障率低(未知或可能出 ...
- vue资料链接
vue 官方api:https://cn.vuejs.org/ vue资源精选:http://vue.awesometiny.com/ vue GitHub地址:https://github.com/ ...
- prepare
目标: 自动驾驶感知负责深度学习感知算法开发,包括目标识别.分割.检测.多目标追踪等有扎实的数理基础,有Linux.ROS.QNX等开发经验,熟悉C/C++编程,有良好的编程习惯 他人简历: skil ...
- [转]C#的反射
一.反射简介 1.1.反射的说明 反射:指程序可以访问.检测和修改它本身状态或行为的一种能力(即:审查元数据并收集关于它的类型信息的能力). ①元数据(编译以后的最基本数据单元:指程序和程序类型本身的 ...