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 ...
随机推荐
- centos安装Jenkins报错
[SKIPPED] jenkins-2.249.3-1.1.noarch.rpm: Already downloaded warning: /var/cache/dnf/jenkins-0919f06 ...
- PHP压缩二进制流转CSV文件
接口返回的数据是二进制流,需先BASE64解码,再进行解压缩,压缩的文件格式为ZIP,需使用Inflater进行解压,即可得到文件. java demo: 转成PHP代码: 贴上 原始二进制流数据,需 ...
- Linux Qt编译时出现has modification time int the future的解决方法
问题场景:我在window系统上合并完代码后,将代码通过TF卡拖到了Debian系统的开发板子上(为什么我不用Winscp或者xhttp传呢?因为网线被同事拿走了...),然后就报这个错. 网上查阅资 ...
- Appium 入门
Appium安装总体需要以下几个步骤: 安装JDK 官网www.oracle.com去下载安装,尽量下载JDK7及以上的版本.然后去设置环境变量: 在系统变量下新建变量JAVA_HOME变量值指向JD ...
- ESXI虚拟机 硬盘扩容/目录（添加新硬盘）
背景: 线上服务器,磁盘Linux的虚拟机根分区已经使用90%,触发了磁盘告警,再一顿操作删除后,勉勉强强回到了82%,现在需要对根目录进行扩容. 进入到EXSI管理平台,看到原来的sda磁盘只有30 ...
- shell脚本实战笔录-在PATH中查找程序
#!/bin/bashin_path(){ cmd=$1 ourpath=$2 result=1 #将默认的IFS(分隔符)为空格,这里先保留原本的给变量oldIFS,然 ...
- 「postOI」Colouring Game
题意 有 \(n\) 个格子排成一行,一开始每个格子上涂了蓝色或红色. Alice 和 Bob 用这些格子做游戏.Alice 先手,两人轮流操作: Alice 操作时,选择两个相邻的格子,其中至少要有 ...
- 2023最新版Selenium 4.6.0语法快速入门
简介 Selenium是一款强而有力的前端应用测试工具,也非常适合搭配Python作为网络爬虫的工具:Selenium可以模拟使用者所有浏览器操作的动作,包括输入文本.点击按钮及拖拽进度条等.有鑑于新 ...
- 【Hive 元数据和真实数据-TAB_COL_STATS记录错误问题】
MySql的元数据以及HDFS上数据的关系 元数据在DBS和TBLS上 (SD_ID) 1 首先通过hive创建一个表table_test 在hdfs的存储路径会生成相应的表 TBLS 也会更新内容进 ...
- Bat命令进行压缩X文件夹下的文件夹及文件
输出日志 echo off for /d %%i in (D:\project101\trunk\x_client\xProject\Assets\AssetBundles\Android~\*.) ...