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中Set里remove详解
例如 1 HashSet set = new HashSet(); 2 Person p1 = new Person(1001,"AA"); 3 Person p2 = new P ...
- Spring的AOP源码解析（二）
Spring AOP 源码解析 目录 Spring AOP 源码解析 前言 本文使用的调试代码 IOC 容器管理 AOP 实例 ProxyFactory 详解 基于注解的 Spring AOP 源码分 ...
- CSS控制背景图片100%自适应填充布局
原文地址:http://blog.csdn.net/wd4java/article/details/50537562 .personal_head { width: 100%; height: 35% ...
- ubuntu配置phpmyadmin
之前已经把LNMP环境搭建好了 安装: sudo apt-get install phpmyadmin 安装必要依赖 sudo apt-get install php-mbstring sudo ap ...
- （性能测试笔记）逻辑IO和物理IO的区别
IO性能对于一个系统的影响是至关重要的. 一个系统经过多项优化以后,瓶颈往往落在数据库:而数据库经过多种优化以后,瓶颈最终会落到IO.而IO性能的发展,明显落后于CPU的发展.Memchached也好 ...
- HIVE- INSERT 方法使用
(1) INSERT INTOINSERT INTO tableVALUES ('aaa' , 111),('bbb' , 222); (2) insert overwrite insert over ...
- 【GROMACS】分子动力学模拟①——环境搭建
系统环境 Win11 22H2 企业版 开启虚拟化.window subsystem for liunx等虚拟机相关的功能 应用商店中安装WSL2 安装步骤 打开Ubuntu,输入sudo apt f ...
- Bert使用
首先打开网址:https://huggingface.co/models 下载想用的模型
- Task :app:lintVitalRelease FAILED
错误信息:Task :app:lintVitalRelease FAILED 问题原因:dl.google.com 无法连接 解决办法: 修改hosts(推荐)通过在线查询ip网站,找到dl.goog ...
- [转]md Typora旧版免费安装包(多平台版本)
typora旧版免费安装包: 链接:https://pan.baidu.com/s/1pIqeO2nTJ9_s16IZj6z3sA?pwd=gut4 提取码:gut4 v1.0以上的版本都要收费了,我 ...