文档章节

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

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

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

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

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

爱码农
01/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

迭代器模式 Iterator 行为型 设计模式(二十)

  在计算机中,Iterator意为迭代器,迭代有重复的含义,在程序中,更有“遍历”的含义      如果给定一个数组,我们可以通过for循环来遍历这个数组,这种遍历就叫做迭代      对于...

SEOwhywhy
15分钟前
1
0
【 58沈剑 架构师之路】InnoDB,5项最佳实践,知其所以然

缓存讲了一个月《缓存架构,一篇足够》。今天,开始写数据库。 第一篇,说说MySQL两个最常用的存储引擎,MyISAM和InnoDB。照自己的理解,把一些知识点总结出来,不只说知识点,多讲“为什么”...

张锦飞
17分钟前
2
0
windows10小鹤双拼注册表

《安全第一》直接发文本内容,自己建文本,改文本后缀reg。 使用方法: 1.复制下示文本内容,打开你的文本编辑器(#记事本notepad或其他++),粘贴文本内容并保存在任意位置(不影响使用) ...

漫步海边小路
24分钟前
1
0
一、数据挖掘

数据挖掘的发展动力---需要是发明之母 数据爆炸问题 自动数据收集工具和成熟的数据库技术使得大量的数据被收集,存储在数据库、数据仓库或其他信息库中以待分析。我们拥有丰富的数据,但却缺...

凯文加内特
27分钟前
2
0
Java线程池ThreadPoolExecutor

线程池 ThreadPoolExecutor 线程池是ExecutorService的实现,可以通过Executors执行工厂构造不同类型的执行服务(线程池)。 ThreadPoolExecutor线程池使用的是阻塞队列BlockingQueue。 用于...

器石_
28分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部