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 ...
随机推荐
- Appium-TouchAction类与MultiAction类（控件元素的滑动、拖动，九宫格解锁，手势操作等）
文章转自:https://www.cnblogs.com/lfr0123/p/13679568.html swipe一般用于对页面进行上下左右滑动操作,但自动化过程中还会遇到其他情况,如对控件元素进行 ...
- liunx常用命令必备，持续更新
inux中的命令的确是非常多,但是只需要掌握我们最常用的命令足够完成我们的工作了. 1.切换超级用户与普通用户 默认登录的是普通用户权限显示$符从普通用户切换超级用户权限:sudo su输入密码 从超 ...
- SpringBoot-集成PageHelper及使用
1.添加依赖 1 <dependency> 2 <groupId>com.github.pagehelper</groupId> 3 <artifactId& ...
- 常用的js方法
1. 声明和初始化数组 我们可以使用默认值(如"".null或 )初始化特定大小的数组0.您可能已经将这些用于一维数组,但如何初始化二维数组/矩阵呢? const array = ...
- Win10用户目录迁移后变成英文的修改办法
比如我的目录从C:\Users\Lemon修改到D:\Users\Lemon后: 1.首先可以将Windows文件管理器选项中的"隐藏受保护的操作系统文件"去掉,就可以看到每个目录 ...
- ssh登录、scp传送文件
一.ssh 1.远程登陆服务器 ssh user@hostname user: 用户名hostname: IP地址或域名 第一次登录时会提示:The authenticity of host '123 ...
- windows server 2012以上版本离线安装 net framework3.5 方法
方法1. 通过服务管理器安装操作系统原镜像文件 准备windows系统镜像文件,解压windows server.iso文件到 D:\WindowsOS 在服务器管理器上添加.NET Framewor ...
- Linux 第十节( APACHE )
Apache 基金会,软件 http 协议 httpd 软件包 vim /etc/httpd/conf/httpd.conf //网站配置主文件 systemctl restart http ...
- Mybatis二级缓存（2）
10.3.一级缓存的原理 10.3.3 一级缓存的测试
- 【服务器数据恢复】Linux服务器分区不能挂载的数据恢复案例
服务器数据恢复环境:某品牌PowerEdge系列服务器,磁盘阵列存储型号为该品牌MD3200系列存储,分配lun:linux centos 7操作系统,EXT4文件系统. 服务器故障:服务器在工作中由 ...