支持多种浏览器的纯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 ...
随机推荐
- Java Applet与Java Application的特点
java application是应用程序,用于桌面开发,java applet是小应用程序,一般嵌入到网页里运行.applet一般用于B/S页面上作为插件式的开发,而application主要是桌面 ...
- 关于CStdioFile的使用问题
在win32控制台调试如下程序 #include "stdafx.h"#include <afx.h>//#include <iostream>//usin ...
- 李洪强漫谈iOS开发[C语言-041]-计算月份天数
李洪强漫谈iOS开发[C语言-041]-计算月份天数
- angularJS之$watch、$digest和$apply方法
最近项目上使用了比较多的angular JS,一直都对它感觉比较陌生,总觉得有点反直觉,这段时间,准备下定决心弄明白,这个框架到底是怎么一回事,以及它的工作原理,生命周期……一点一点的啃完它吧.首先, ...
- 生产环境的redis高可用集群搭建
这里只是总结一下安装步骤 如果要了解redis集群高可用的原理,推荐仔细看一遍配置文件示例http://download.redis.io/redis-stable/redis.conf,源码包里也有 ...
- ES6入门之Generator函数
Generator Generator函数是ES6提供的一种异步编程解决方案,Generator函数是一个状态机,封装了多个内部状态. 执行Generator函数会返回一个遍历器对象,也就是说,Gen ...
- SQL创建链接服务器
二.--创建链接服务器 exec sp_addlinkedserver 'srv_lnk','','SQLOLEDB','远程服务器名或ip地址' exec sp_addlinkedsrvlogin ...
- Android 定制下拉刷新头部 Ultra Pull To Refresh
我们看到手机中的各种APP的花样繁多的下拉刷新是不是有点心动呢,想着自己定制自己的专门的下拉刷新,市场上比如,58同城,京东,天猫,美团等下拉刷新都是在下拉头部执行帧动画,我最近看到一个APP,就是慕 ...
- SpringMVC上传文件以流方式判断类型附常用类型
// 此类中判断类型所截取的byte 长度暂不确定,请使用者测试过使用 package com.tg.common.other; import com.tg.common.tginterface.TG ...
- js如何判断一个对象是不是Array
typeof 操作符 对于Function, String, Number ,Undefined 等几种类型的对象来说,他完全可以胜任,但是为Array时 var arr=new Array(&quo ...