支持多种浏览器的纯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 ...
随机推荐
- Meteor 之 数据的发布于订阅（Publish and subscribe ）
发布和订阅 发布(Publication)和订阅(Subscription)是 Meteor 的最基本最重要的概念之一,但是如果你是刚刚开始接触 Meteor 的话,也是有些难度的. 这已经导致不少误 ...
- unity3d设置3D模型显示在2D背景之前(多个相机分层显示)(转)
解决步骤: 1.添加一个摄像机,命名为BackgroundCamera,然后在Layer添加一个background层.并且将plane拖放到改相机节点下. 然后将BackgroundCamera和P ...
- Eclipse调试Java的十个技巧
先提三点 不要使用System.out.println()作为调试工具 启用所有组件的详细的日志记录级别 使用一个日志分析器来阅读日志 1.条件断点 想象一下我们平时如何添加断点,通常的做法是 ...
- jq的bind用法
type,[data],function(eventObject)String,Object,Function type: 含有一个或多个事件类型的字符串,由空格分隔多个事件.比如"clic ...
- BufferedReader方法-----Scanner方法
import java.io.*; import java.util.Scanner; public class C { public static void main(String []args) ...
- dojo 总结
对以前项目中用到的dojo框架进行一个框架式的总结,以备参考学习. 主要组成... 1 开发注意... 3 Dojo代码约定... 3 Dojo形式的脚本库... 4 Dojo Build. 4 Do ...
- dataguru试听课程
http://www.dataguru.cn/article-5447-1.html#userconsent#
- 如何在User版本开启串口(Uart),抓取上层Log,开启输入控制台
[原][FAQ03891] 如何在User版本开启串口(Uart),抓取上层Log,开启输入控制台 2014-11-26阅读1369 评论0 FAQ Content [Description]如何在U ...
- hihoCoder 1082然而沼跃鱼早就看穿了一切 （字符串处理）
http://hihocoder.com/problemset/problem/1082 首先将字符串全部字母变成小写,不断用find查找字符串中的Marshtomp,并把每个字符变为’#‘ ,最后统 ...
- Oracle Report : REP-1219
+---------------------------------------------------------------------------+ 总帐管理系统: Version : 12.0 ...