文档章节

纯CSS写的下拉菜单

风灬云
 风灬云
发布于 2015/04/14 19:43
字数 267
阅读 182
收藏 11

效果图,如上图所示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#menu
{
margin-left:auto;
margin-right:auto;
width:1000px;

}
ul {
margin: 0px;
padding: 0px;
height:30px;
} 
ul li {
float: left;
display: inline;
font: 0.9em Arial, Helvetica, sans-serif;
height: 30px;
width: 100px;
list-style: none;
}
ul li a {
color: #F4F4F4;
text-decoration: none;
text-align:center;
line-height: 29px;
width: 91px;
margin: 0px;
padding: 0px 0px 0px 8px;
display: block;
border-right: solid 1px #ccc;
border-bottom:solid 1px #ccc;
background: #808080;
}
ul li ul li { height:25px; }
ul li ul li a {
background: #666;
line-height:24px;
}
ul li a:hover { background: #666; }
ul li ul { visibility: hidden; }
ul li:hover ul { visibility: visible; }
ul li ul li a:hover { background: #333; }
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单二</a>
<ul>
<li><a href="#">子菜单一</a></li>
<li><a href="#">子菜单二</a></li>
<li><a href="#">子菜单三</a></li>
</ul>
</li>
<li><a href="#">菜单三</a></li>
<li><a href="#">菜单四</a>
<ul>
<li><a href="#">子菜单一</a></li>
<li><a href="#">子菜单二</a></li>
<li><a href="#">子菜单三</a></li>
</ul>
</li>
<li><a href="#">菜单五</a></li>
</ul>
</div>
</body>
</html>

© 著作权归作者所有

共有 人打赏支持
风灬云
粉丝 18
博文 91
码字总数 30310
作品 1
西宁
技术主管
加载中

评论(1)

寒川
寒川
ie6呢?
纯CSS3下拉菜单导航 多种下拉弹出动画

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

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

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

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

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

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

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

rin9958
2016/06/30
27
0
分享5个实用而且美观的CSS3实例

对于设计人员和开发人员来说,CSS一直是web设计过程中重要的一部分,随着CSS3的出现以及越来越多的浏览器对它的支持,设计师们有了 更多的选择。 用纯CSS也可以实现各种各样很酷的效果了,甚...

小编辑
2010/06/29
835
3

没有更多内容

加载失败,请刷新页面

加载更多

首个智能运维项目开源!腾讯织云Metis,用算法替代人为指定规则

10月20日,腾讯织云Metis 智能运维学件平台在OSCAR开源先锋日上宣布,正式对外开源。Metis 是AIOps(Algorithmic IT Operations),即智能运维领域的首个开源产品。智能运维主张通过算法从海...

腾讯开源
12分钟前
1
0
Java面试170题

1、面向对象的特征有哪些方面? 2、访问修饰符public,private,protected,以及不写(默认)时的区别? 3、String 是最基本的数据类型吗? 4、float f=3.4;是否正确? 5、short s1 = 1; s1 = ...

lanyu96
13分钟前
0
0
利用Ant脚本生成war包

使用ant脚本前的准备 1、下载一个ant安装包。如:apache-ant-1.8.4-bin.zip。解压到E盘。 2、配置环境变量。新增ANT_HOME:E:\apache-ant-1.8.4;PATH增加:E:\apache-ant-1.8.4\bin。 3、检...

狼王黄师傅
16分钟前
1
0
优雅的写出类

前言 虽然现在已经是ES6的时代,但是,还是有必要了解下ES5是怎么写一个类的。 本文详述JavaScript面向对象编程中的类写法,并分步骤讲述如何写出优雅的类。 一、例子 例子为一个轻提示组件T...

peakedness丶
18分钟前
1
0
Python基础案例教程

一、超市买薯片 # 用户输入薯片的单价danjia = float(input("薯片的单价"))# 用户输入购买袋数daishu = int(input("购买的袋数"))# 计算总价zongjia = danjia * daishu# 输出结果...

linuxprobe16
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部