支持多种浏览器的纯css下拉菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="站长,网页特效,js特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<title>支持多种浏览器的纯CSS下拉菜单，sky整理收集。</title>
<style type="text/css">
*{margin:0;padding:0;}
.menu{font-size:12px;position:relative;z-index:100;}
.menu ul{list-style:none;}
.menu li {float:left;position:relative;}
.menu ul ul {visibility:hidden;position:absolute;left:3px;top:23px;}
.menu table {position:absolute; top:0; left:0;}
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible;}
.menu a{display:block;border:1px solid #aaa;background:red;padding:2px 10px;margin:3px;color:#fff;text-decoration:none;}
.menu a:hover{background:#f2cdb0;color:#f00;border:1px solid red;}
.menu ul ul{}
.menu ul ul li {clear:both;text-align:left;font-size:12px;}
.menu ul ul li a{display:block;width:100px;height:13px;margin:0;border:0;border-bottom:1px solid red;}
.menu ul ul li a:hover{border:0;background:#f2cdb0;border-bottom:1px solid #fff;}
</style>
</head>
<body>
<a href="<#ZC_BLOG_HOST#>">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>
<!--欢迎来到站长特效网，我们网站收集大量高质量js特效，提供许多广告代码下载，网址：www.zzjs.net，zzjs@msn.com,用.net打造靓站-->
<div class="menu">
<ul>
<li><a href="http://zzjs.net/">XHTML/CSS
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://zzjs.net/">标准</a></li>
<li><a href="http://zzjs.net/">教程</a></li>
<li><a href="http://zzjs.net/">技术文章</a></li>
<li><a href="http://zzjs.net/">常见问题</a></li>
<li><a href="http://zzjs.net/">布局教程专题</a></li>
<li><a href="http://zzjs.net/">CSS菜单</a></li>
<li><a href="http://zzjs.net/">浏览器兼容</a></li>
<li><a href="http://zzjs.net/">滚动条相关</a></li>
<li><a href="http://zzjs.net/">圆角矩形专题</a></li>
<li><a href="http://zzjs.net/">CSS特效欣赏专题</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="http://zzjs.net/">站长特效网
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://zzjs.net/">网站首页</a></li>
<li><a href="http://zzjs.net/?cat=1">zzjs</a></li>
<li><a href="http://zzjs.net/?cat=2">网页特效</a></li>
<li><a href="http://zzjs.net/?cat=3">广告代码</a></li>
<li><a href="http://zzjs.net/">rss订阅</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="http://zzjs.net/">javascript
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://zzjs.net/?cat=1">JSON</a></li>
<li><a href="http://zzjs.net/?cat=2">技术文章</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="http://zzjs.net/">DOM</a></li>
<li><a href="http://zzjs.net/">XML</a></li>
<li><a href="http://zzjs.net/">正则表达式
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://zzjs.net/">正则表达式简介</a></li>
<li><a href="http://zzjs.net/">正则表达式之道</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="http://zzjs.net/">网站优化</a></li>
<li><a href="http://zzjs.net/">电脑网络</a></li>
<li><a href="http://zzjs.net/">建站技术
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://zzjs.net/?cat=2">PHP</a></li>
<li><a href="http://zzjs.net/">ASP</a></li>
<li><a href="http://zzjs.net/?cat=2">ASP.NET</a></li>
<li><a href="http://zzjs.net/?cat=2">JSP</a></li>
<li><a href="http://zzjs.net/?cat=2">SQL</a></li>
<li><a href="http://zzjs.net/?cat=3">Flash</a></li>
<li><a href="http://zzjs.net/?cat=1">Dreamweaver</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
</body>
</html>
支持多种浏览器的纯css下拉菜单的更多相关文章
- CSS+JS下拉菜单和纯CSS下拉菜单
下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...
- 纯css下拉菜单的制作
通过观察下拉菜单的过程,发现有两种状态,一种是鼠标没有hover时,一种是鼠标hover时. 主菜单hover时,显示子菜单:主菜单没有hover时,不显示子菜单 <!DOCTYPE html& ...
- 纯CSS下拉菜单（希望对有需要的小伙伴有所帮助）
效果截图(颜色有点丑,请无视): <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- 超简洁的CSS下拉菜单
效果体验:http://hovertree.com/texiao/css/3.htm HTML文件代码: <!DOCTYPE html> <html xmlns="http ...
- 华丽导航CSS下拉菜单特效
华丽导航CSS下拉菜单特效,华丽导航,导航特效,CSS,下拉菜单,华丽特效. 代码地址:http://www.huiyi8.com/sc/26811.html 风景图片网:http://www.hui ...
- CSS：CSS 下拉菜单
ylbtech-CSS:CSS 下拉菜单 1.返回顶部 1. CSS 下拉菜单 使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果. 下拉菜单实例 实例演示 1 实例演示 2 基本下拉菜单 当鼠标 ...
- 使用checkbox实现纯CSS下拉框
在这个例子中,我们会看到一个纯CSS制作的下拉框.主要是要用到了HTML元素的checkbox 和CSS3选择器,并没有用到JavaScript.例子如下: Click to Expand Link ...
- 纯CSS下拉导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="h ...
- 简易的CSS下拉菜单 - 1
<!DOCTYPE html> <html> <head> <style> body{ margin:0; } .dropmenu{ backgroun ...
随机推荐
- 快速构建自己的CentOS发行版
一.制作LTOS具体过程 光盘结构介绍 * isolinux 目录存放光盘启动时的安装界面信息 * images 目录包括了必要的启动映像文件 * CentOS 目录存放安装软件包及信息 * .dis ...
- FreePascal经典资料
------------------------------------------------------------------------ 这是每个版本的changelog: http://bu ...
- ActiveMQ简单的HelloWorld实例
我们使用ActiveMQ为大家实现一种点对点的消息模型. 开发时候,要将apache-activemq-5.12.0-bin.zip解压缩后里面的activemq-all-5.12.0.jar包加入到 ...
- 通用sqlserver分页存储过程
来自:http://www.cnblogs.com/vagerent/archive/2007/10/17/927825.html 单主键: CREATE PROC P_viewPage /** ...
- javascript QUnit 单元测试
<!doctype html> <html> <head lang="zh-CN" dir="ltr"> <meta ...
- URAL 1066 Garland 二分
二分H2的位置,判断条件为是否有Hi < 0 #include <cstdio> #include <cstring> #include <cstdlib> ...
- SGU 149 Computer Network 树DP/求每个节点最远端长度
一个比较经典的题型,两次DFS求树上每个点的最远端距离. 参考这里:http://hi.baidu.com/oi_pkqs90/item/914e951c41e7d0ccbf904252 dp[i][ ...
- POJ 3468 A Simple Problem with Integers (伸展树区间更新求和操作 ， 模板)
伸展数最基本操作的模板,区间求和,区间更新.为了方便理解,特定附上一自己搞的搓图 这是样例中的数据输入后建成的树,其中的1,2是加入的边界顶点,数字代表节点编号,我们如果要对一段区间[l, r]进行操 ...
- [2014-03-13 08:46:42 - Dex Loader] Unable to execute dex: java.nio.BufferOverflowException. Check the Eclipse log for stack trace.
Unable to execute dex: java.nio.BufferOverflowException. Check the Eclipse log for stack trace. 问题提示 ...
- JSP 中的几种注释
1.多行注释 <!-- 注释1 注释2 注释3 --> 或者 <!-- 注释1 …… 注释n //--> 2.多行注释,不同的是:注释内容不会发送到客户端,会被JSP引擎所忽略 ...