文档章节

纯CSS写的下拉菜单

风灬云
 风灬云
发布于 2015/04/14 19:43
字数 267
阅读 182
收藏 11
点赞 0
评论 1

效果图,如上图所示

<!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
博文 93
码字总数 29511
作品 0
西宁
技术主管
加载中

评论(1)

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

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

HTML5资源教程 ⋅ 01/09 ⋅ 0

超炫酷纯CSS3 3D折叠二级下拉菜单

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

HTML5资源教程 ⋅ 2017/12/21 ⋅ 0

css下拉菜单绝对定位的作用?

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

unix ⋅ 2015/03/14 ⋅ 2

推荐7个 CSS3 制作的创意下拉菜单效果

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

rin9958 ⋅ 2016/06/30 ⋅ 0

分享5个实用而且美观的CSS3实例

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

小编辑 ⋅ 2010/06/29 ⋅ 3

程序猿必备的15款web前端动画插件七

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

爱码农 ⋅ 01/08 ⋅ 0

9款风格华丽的jQuery/CSS3插件

今天向大家分享9款效果相当不错的jQuery/CSS3插件,不多说,直接来看看这些插件吧。 1、jQuery动画下拉菜单Smart Menu 这是一款基于jQuery的动画下拉菜单,子菜单外观比较时尚,鼠标移到菜单...

yykj ⋅ 2014/01/06 ⋅ 1

由纯CSS3实现的超酷飞行状下拉菜单特效

日期:2012-4-26 来源:GBin1.com 在线演示 本地下载 今天介绍一款来自script-tutorial的超酷飞行状菜单特效,和传统的下拉菜单不同,它的子菜单都是水平飞入而非滑动下拉出现,非常的与众不...

gbin1 ⋅ 2012/04/27 ⋅ 0

5个实用的CSS3实例

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

晨曦之光 ⋅ 2012/03/09 ⋅ 0

20 个很酷的使用 CSS3 制作的导航菜单教程

最近关于 HTML5 和 CSS3 的内容挺多的,说明这项技术日趋成熟,本文介绍 20 个效果很酷的导航菜单。 使用 CSS3 创建 Tabbed 导航条 如何使用 CSS3 创建环形菜单 使用纯 HTML/CSS3 创建 Ribb...

红薯 ⋅ 2011/07/06 ⋅ 6

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Centos7重置Mysql 8.0.1 root 密码

问题产生背景: 安装完 最新版的 mysql8.0.1后忘记了密码,向重置root密码;找了网上好多资料都不尽相同,根据自己的问题总结如下: 第一步:修改配置文件免密码登录mysql vim /etc/my.cnf 1...

豆花饭烧土豆 ⋅ 今天 ⋅ 0

熊掌号收录比例对于网站原创数据排名的影响[图]

从去年下半年开始,我在写博客了,因为我觉得业余写写博客也还是很不错的,但是从2017年下半年开始,百度已经推出了原创保护功能和熊掌号平台,为此,我也提交了不少以前的老数据,而这些历史...

原创小博客 ⋅ 今天 ⋅ 0

LVM讲解、磁盘故障小案例

LVM LVM就是动态卷管理,可以将多个硬盘和硬盘分区做成一个逻辑卷,并把这个逻辑卷作为一个整体来统一管理,动态对分区进行扩缩空间大小,安全快捷方便管理。 1.新建分区,更改类型为8e 即L...

蛋黄Yolks ⋅ 今天 ⋅ 0

Hadoop Yarn调度器的选择和使用

一、引言 Yarn在Hadoop的生态系统中担任了资源管理和任务调度的角色。在讨论其构造器之前先简单了解一下Yarn的架构。 上图是Yarn的基本架构,其中ResourceManager是整个架构的核心组件,它负...

p柯西 ⋅ 今天 ⋅ 0

uWSGI + Django @ Ubuntu

创建 Django App Project 创建后, 可以看到路径下有一个wsgi.py的问题 uWSGI运行 直接命令行运行 利用如下命令, 可直接访问 uwsgi --http :8080 --wsgi-file dj/wsgi.py 配置文件 & 运行 [u...

袁祾 ⋅ 今天 ⋅ 0

JVM堆的理解

在JVM中,我们经常提到的就是堆了,堆确实很重要,其实,除了堆之外,还有几个重要的模块,看下图: 大 多数情况下,我们并不需要关心JVM的底层,但是如果了解它的话,对于我们系统调优是非常...

不羁之后 ⋅ 昨天 ⋅ 0

推荐:并发情况下:Java HashMap 形成死循环的原因

在淘宝内网里看到同事发了贴说了一个CPU被100%的线上故障,并且这个事发生了很多次,原因是在Java语言在并发情况下使用HashMap造成Race Condition,从而导致死循环。这个事情我4、5年前也经历...

码代码的小司机 ⋅ 昨天 ⋅ 2

聊聊spring cloud gateway的RetryGatewayFilter

序 本文主要研究一下spring cloud gateway的RetryGatewayFilter GatewayAutoConfiguration spring-cloud-gateway-core-2.0.0.RC2-sources.jar!/org/springframework/cloud/gateway/config/G......

go4it ⋅ 昨天 ⋅ 0

创建新用户和授予MySQL中的权限教程

导读 MySQL是一个开源数据库管理软件,可帮助用户存储,组织和以后检索数据。 它有多种选项来授予特定用户在表和数据库中的细微的权限 - 本教程将简要介绍一些选项。 如何创建新用户 在MySQL...

问题终结者 ⋅ 昨天 ⋅ 0

android -------- 颜色的半透明效果配置

最近有朋友问我 Android 背景颜色的半透明效果配置,我网上看资料,总结了一下, 开发中也是常常遇到的,所以来写篇博客 常用的颜色值格式有: RGB ARGB RRGGBB AARRGGBB 这4种 透明度 透明度...

切切歆语 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部