文档章节

下拉菜单(纯CSS完成)

Clover286
 Clover286
发布于 2016/05/13 11:08
字数 234
阅读 138
收藏 0
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>下拉菜单</title>		
		<style type="text/css">
		*{margin: 0;padding: 0;list-style:none;text-decoration-line: none;}
		#menue{background-color: #FFFACD;width: 400px;text-align: center;margin: 20px auto;}
		.munueUl1>li{display:inline-block;padding:5px 20px;position:relative;}	
		.munueUl1>li:hover{background-color: #CCC;}		
		.munueUl1 li ul li{padding:0 20px;background-color:#BDB76B;margin: 2px 0;}	
		.munueUl1 li ul li:hover{background-color:gray;margin: 4px 0;border-radius: 5px;}
		.munueUl1 li>ul{position:absolute;top: 30px;left: 0px;padding:0;display:none;}	
		.munueUl1 li:hover ul{ display:block;}	
		</style>
	</head>
	<body>
		<div id="menue">
			<ul class="munueUl1">
				<li class="menueLi1"><a href="#">童装</a>
					<ul class="menueLi1Ul">
						<li><a href="#">衣服</a></li>
						<li><a href="#">裤子</a></li>
						<li><a href="#">鞋子</a></li>
					</ul>
				</li>
				<li class="menueLi2"><a href="#">女装</a>
					<ul class="menueLi2Ul">
						<li><a href="#">衣服</a></li>
						<li><a href="#">裤子</a></li>
						<li><a href="#">鞋子</a></li>
					</ul>
				</li>
				<li class="menueLi3"><a href="#">男装</a>
					<ul class="menueLi3Ul">
						<li><a href="#">衣服</a></li>
						<li><a href="#">裤子</a></li>
						<li><a href="#">鞋子</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</body>
</html>

 

© 著作权归作者所有

Clover286
粉丝 10
博文 210
码字总数 67024
作品 0
武汉
程序员
私信 提问
纯CSS3下拉菜单导航 多种下拉弹出动画

纯CSS3下拉菜单导航 多种下拉弹出动画 HTML5资源教程2018-01-091 阅读 css3下拉菜单动画 之前我们分享过非常多的jQuery/CSS3下拉菜单插件,有些非常实用,比如这款 HTML5/CSS3水平二级下拉菜...

HTML5资源教程
2018/01/09
0
0
超炫酷纯CSS3 3D折叠二级下拉菜单

超炫酷纯CSS3 3D折叠二级下拉菜单 HTML5资源教程2017-12-210 阅读 css3下拉菜单3d 这是一款外观非常炫酷的CSS3 3D下拉菜单,它的特点是主菜单的背景和页面背景非常融合,看上去就像菜单嵌入在...

HTML5资源教程
2017/12/21
0
0
css下拉菜单绝对定位的作用?

我用css实现了一个下拉菜单定位的问题。已经可以实现了。但是我在网上看到很多人实现的下拉菜单用到了定位,我想知道这个定位解决了什么问题?代码如下: css代码如下: 上面这些代码已经可以...

unix
2015/03/14
1K
2
推荐7个 CSS3 制作的创意下拉菜单效果

使用 jQuery 和 CSS3 制作向下滑动的导航菜单 在线演示 源码下载 2. CSS3 简约风格导航菜单 在线演示 源码下载 3. CSS3 动画下拉菜单 在线演示 源码下载 4. 纯 CSS3 制作的两级菜单 在线演示...

rin9958
2016/06/30
42
0
程序猿必备的15款web前端动画插件七

  1.超简易的SVG/CSS3 Loading加载动画图标   今天我们要为大家分享一组非常简易的SVG/CSS3 Loading加载动画图标,和之前分享的SVG实现的一组超华丽Loading加载动画相比,这组Loading动画...

爱码农
2018/01/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

《Designing.Data-Intensive.Applications》笔记 四

第九章 一致性与共识 分布式系统最重要的的抽象之一是共识(consensus):让所有的节点对某件事达成一致。 最终一致性(eventual consistency)只提供较弱的保证,需要探索更高的一致性保证(stro...

丰田破产标志
今天
4
0
docker 使用mysql

1, 进入容器 比如 myslq1 里面进行操作 docker exec -it mysql1 /bin/bash 2. 退出 容器 交互: exit 3. mysql 启动在容器里面,并且 可以本地连接mysql docker run --name mysql1 --env MY...

之渊
今天
6
0
python数据结构

1、字符串及其方法(案例来自Python-100-Days) def main(): str1 = 'hello, world!' # 通过len函数计算字符串的长度 print(len(str1)) # 13 # 获得字符串首字母大写的...

huijue
今天
4
0
OSChina 周日乱弹 —— 我,小小编辑,食人族酋长

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @宇辰OSC :分享娃娃的单曲《飘洋过海来看你》: #今日歌曲推荐# 《飘洋过海来看你》- 娃娃 手机党少年们想听歌,请使劲儿戳(这里) @宇辰OSC...

小小编辑
今天
993
11
MongoDB系列-- SpringBoot 中对 MongoDB 的 基本操作

SpringBoot 中对 MongoDB 的 基本操作 Database 库的创建 首先 在MongoDB 操作客户端 Robo 3T 中 创建数据库: 增加用户User: 创建 Collections 集合(类似mysql 中的 表): 后面我们大部分都...

TcWong
今天
40
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部