用 Javascript 和 CSS 实现脚注(Footnote)效果

脚注(Footnote)是向用户提供更多信息的一个最佳途径,也是主体信息的一个有效补充,常见于各种印刷书籍中。不过,既然脚注有这些好处,我们当然要在网页中也加以利用,本文向您介绍了用 Javascript 和 CSS 实现脚注效果的方法。

用 Javascript 和 CSS 实现脚注(Footnote)效果 – 示例

 
<script type="text/javascript">
 
// 说明:用 Javascript 和 CSS 实现脚注(Footnote)效果
// 作者:CodeBit.cn ( http://www.CodeBit.cn )
 
var footNotes = function(){};
 
footNotes.prototype = {
 
	footNoteClassName : "footnote",	// 脚注的 className
	footNoteTagName : "span",	// 脚注的标签名
	footNoteBackLink : " [back]",	// 返回链接
 
	format : function(contentID, footnoteID)
	{
		if (!document.getElementById) return false;
 
		var content = document.getElementById(contentID);
		var footnote = document.getElementById(footnoteID);
 
		var spans = content.getElementsByTagName(this.footNoteTagName);
 
		var noteArr = [];
		var note = 0;
		
		var elContent;
 
		var len = spans.length;
		for (i=0; i<len; i++)
		{
			note ++;
 
			if (spans[i].className == this.footNoteClassName)
			{
				// 获取脚注内容
				elContent = spans[i].innerHTML;
 
				noteArr.push(elContent);
 
				// 创建一个指向脚注的链接
				var newEle = document.createElement( "a" );
				newEle.href = '#ftn_' + footnoteID + '_' + note;
				newEle.title = "show footnote";
				newEle.id = 'ftnlink_'+footnoteID+'_' + note;
				
				newEle.innerHTML = note;
				
				// 清空原有内容
				while (spans[i].childNodes.length)
				{
					spans[i].removeChild( spans[i].firstChild );
				}
				
				spans[i].appendChild( newEle );
			}
		}
 
		// 创建注释列表
		var ul = this.__buildNoteList(noteArr, footnoteID);
 
		footnote.appendChild(ul);
 
	},
 
	__buildNoteList : function(notes, noteID) 
	{
		if(!notes || notes.length < 1) return;
		
		var ul = document.createElement('ul');
 
		ul.className = this.footNoteClassName;
 
		var li;
 
		var len = notes.length + 1;
		for(i=1; i<len; i++)
		{
			li = document.createElement('li');
			li.id = "ftn_"+noteID+"_"+i;
 
			li.innerHTML = notes[i-1];
 
			// 创建【返回】链接
			var link = document.createElement("a");
			link.href = "#ftnlink_" + noteID + "_" + i;
 
			link.innerHTML = this.footNoteBackLink;
 
			li.appendChild( link );
 
			ul.appendChild( li );
		}
 
		return ul;
	}
};
 
</script>

要实现脚注,我们需要下列元素:

 
<div id="article1">
 
CSS <span class="footnote">CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。</span>
 
</div>
	
<div id="artnotes1" class="footnoteHolder"></div>

其中:
article1 是你需要脚注的文章主体
<span class="footnote"> .. </span> 是注释内容,标签 span 和 class 均可配置。
artnotes1 是显示脚注的地方

按照默认的设置调用方式:

 
<script type="text/javascript">
 
	var footnote = new footNotes();
	footnote.format('article1','artnotes1');
 
</script>

如果你想自定义一些内容,可以用下面的方式:

 
<script type="text/javascript">
 
	var footnote = new footNotes();
	footnote.footNoteClassName = "footnote2";
	footnote.footNoteTagName = "em";
	footnote.footNoteBackLink = " [back &laquo;]";
	footnote.format('article1','artnotes1');
 
</script>

用 CSS 让你的按钮(button)更加迷人

这篇文章教你用 CSS 制作漂亮的有点击效果的按钮,明白了原理,相信你也可以制作更加丰富的效果。

用 CSS 让你的按钮(button)更加迷人 – 示例

我们用 A 包含一个 SPAN 标签来实现此效果:

 
<a class="button" href="#"><span>按钮文字</span></a>

设置按钮样式:

 
<style type="text/css">
 
a.button {
	background: transparent url('bg_button_a.gif') no-repeat scroll top right;
	color: #444;
	display: block;
	float: left;
	font: normal 12px arial, sans-serif;
	height: 24px;
	margin-right: 6px;
	padding-right: 18px; /* sliding doors padding */
	text-decoration: none;
}
 
a.button span {
	background: transparent url('bg_button_div.gif') no-repeat;
	display: block;
	line-height: 14px;
	padding: 5px 0 5px 18px;
}
 
</style>

为按钮添加点击样式:

 
<style type="text/css">
 
a.button:active {
	background-position: bottom right;
	color: #000;
	outline: none; /* hide dotted outline in Firefox */
}
 
a.button:active span {
	background-position: bottom left;
	padding: 6px 0 4px 18px; /* push text down 1px */
}
 
</style>

由于 IE 下点击后不能还原到默认状态,因此,我们需要在标签里添加一段代码:

 
<a class="button" href="#" onclick="this.blur(); return false;"><span>按钮文字</span></a>

如果你需要用它提交表单(FORM),那么可以在 onclick 里面添加一个提交语句,如:document.forms[‘theForm’].submit();

本文翻译自:
http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html

为了方便学习,本文并未完整翻译,如果你有兴趣,请直接浏览原文。

如何在图片浮动时不让文字内容环绕到图片下方

如何在图片浮动时不让文字内容环绕到图片下方

类似左侧图片右侧文字的排版方式我们经常能够见到,但是,有许多网友都遇到过一个问题:在图片浮动到一侧时,超出图片高度的文字往往会环绕到图片的下方。

ghettocooler.net 的解决方案:

如何在图片浮动时不让文字内容环绕到图片下方 – 示例1

 
<style type="text/css">
 
.callout {
	border:1px solid #000;
	float:left;
	width:275px;
}
 
.callout h3 {
	width:115px;
	height:65px;
	float:left;
	text-indent:-8008px;
	background:transparent url(team-report.gif) no-repeat 0 0;
}
 
.callout * {
	width:160px;
	float:right;
}
 
.callout * * {
	width:auto;
	float:none;
}
 
</style>
 
<div class="callout">
	<h3>team report graphic, replaced image</h3>
	<h2>Team Report 10-06-05</h2>
 
	<ul>
		<li>An <a href="#">anchor tag</a> perhaps?</li>
		<li>Or a <strong>strong tag</strong> perhaps?</li>
	</ul>
 
	<p>Here's a paragraph too!</p>
</div>

原文请浏览:
http://www.ghettocooler.net/2005/11/13/image-floats-without-the-text-wrap/

用背景图的方式实现在图片浮动时不让文字内容环绕到图片下方

这个方法的好处是代码简单,使用方便,当然,前提是你不需要在图片上加链接。

如何在图片浮动时不让文字内容环绕到图片下方 – 示例2

 
<style type="text/css">
.callout {
	background:url('logo.gif') no-repeat 5px 5px;
	padding:5px 5px 5px 230px;
	border:1px solid #999;
	width:60%;
	margin:0 auto;
}
.callout h2 {
	margin:0;
	padding:0;
}
</style>
 
<div class="callout">
	<h2>CodeBit.cn - 聚合小段精华代码</h2>
	<p>在编程的过程中,我们通常都会积累很多简单、有效并且可重用的小段代码,一个简单的字符串处理函数或者一个验证邮件地址的正则表达式,又或者一个简单的文件上传类,甚至一个效果不错的CSS导航样式。这些小技巧为我们节省了不少时间,但是时间一长,代码数量越来越多,寻找起来也耗费了不少时间。因此,本站致力于收集整理一些类似的小知识,并且努力提高文章搜索质量,一来方便大家查阅,二来也算是支持一下开源事业。</p>
</div>

用 CSS 修饰你的提示信息

本文所指的“提示信息”并非 Javascript 中的 alert(),而是直接放在页面中的想要引起访问者关注的区域,比如在注册页面我们会在表单上方放置一条提示:“为了能够更好的给您提供服务,请详细填写您的个人信息!”。在重视用户体验的今天,我们也要让这些提示信息更加准确、快速、形象的传递给用户。

用 CSS 修饰你的提示信息 – 示例

我们可以先创建一个上下边框为 2 象素的 DIV ,因为我们要用到一个16象素的小图标,所以我们加上 padding:

 
<style type="text/css">
div.alertMessage {
	border-top:2px solid;
	border-bottom:2px solid;
	padding:5px 15px 5px 45px;
	text-align:left;
}
</style>

为了让用户更加容易的区分出提示信息的性质,我们可以分别给不同的信息创建不同的样式,比如警告信息我们可以将颜色设置为黄色,然后再加上一个象征警告的小图标:

 
<style type="text/css">
div.exclamation {
	background:#FFF7C0 url('exclamation.gif') no-repeat 15px center;
	border-color:#FED626;
}
</style>

按照这样的方法我们还可以创建很多其他的信息提示样式:

 
<style type="text/css">
div.information {
	background:#F8FAFC url('information.gif') no-repeat 15px center;
	border-color:#B5D4FE;
}
</style>

这篇文章基于
http://www.bioneural.net/2006/04/01/create-a-valid-css-alert-message/ (英文)

本文将公共部分独立,通过修改两个属性来实现更多效果。

用图片实现圆角边框的效果

在页面上内容很多的时候,我们通常需要用特定的方式分离开,这样可以让访问者迅速明确页面上内容的分布情况,常用的方式是用色块和有边框的矩形。本文介绍的是用图片实现的圆角边框效果,如果运用得当,一定可以让你的页面增色不少。

用图片实现圆角边框的效果 – 示例

 
<style type="text/css">
 
.box, .box .content, .box .title, .box .title * { background: #FFF url('bg_box_green_800x800.gif') 100% 100% no-repeat; }
.box { margin: 3px 0; padding: 0 15px 0 0; }
.box .title { background-position: 100% 0; margin: 0 -15px 0 0; padding: 0 15px 0 0; }
.box .title * { background-position: 0 0; margin: 0; padding: 15px 0 5px 15px; height: 1%; }
.box .content { background-position: 0 100%; margin-right: 0px; padding: 0 0 15px 15px; }
.box .title h4 { color: #227A1D; }
.box .content p {margin:0; padding:8px 0;}
 
</style>
 
<div class="box">
	<div class="title">
		<h4>Codebit.cn - 聚合小段精华代码</h4>
	</div>
	<div class="content">
 
	<p>在编程的过程中,我们通常都会积累很多简单、有效并且可重用的小段代码,一个简单的字符串处理函数或者一个验证邮件地址的正则表达式,又或者一个简单的文件上传类,甚至一个效果不错的CSS导航样式。这些小技巧为我们节省了不少时间,但是时间一长,代码数量越来越多,寻找起来也耗费了不少时间。因此,本站致力于收集整理一些类似的小知识,并且努力提高文章搜索质量,一来方便大家查阅,二来也算是支持一下开源事业。</p>
 
	</div>
</div>

让你的文本框(input)更加丰富多彩!

经常看到一些网站的文本框有一些很不错的效果,比如搜索关键词文本框里面有一个象征搜索的小图片,或者是文本框边框非常柔和。其实,这些效果制作都非常简单,看过本文,相信你也可以实现丰富多彩的文本框效果。

让你的文本框(input)更加丰富多彩! – 示例

为你的文本框加一个说明用途的小图标

 
<style type="text/css">
 
input.txtInput {
	background: #fff;
	background-repeat: no-repeat;
	background-position: 2px center;
	border:1px solid #999;
	padding:2px 2px 2px 20px;
}
input.searchInput {background-image: url(search.gif);}
input.commentInput {background-image: url(comments.gif);}
 
</style>

上面的代码中 input.txtInput 定义了文本框中有小图标的通用样式,其中 padding 的第四个值是定义文字内容从 20 象素处开始,原因是本文的图片是 16 象素大小,文字四周有 2 象素的边距。具体到实际应用,需要根据你的图片大小决定。

然后,我们又定义了 searchInput commentInput 两个文本框样式,分别设置了2个不同的小图标。这样,我们在设置文本框的 class 时可以这样写:

 
<p>
<label for="keyword">搜索:</label> 
<input type="text" name="keyword" id="keyword" class="txtInput searchInput" />
</p>
 
<p>
<label for="comment">评论:</label> 
<input type="text" name="comment" id="comment" class="txtInput commentInput" />
</p>

为你的文本框加一个效果柔和的边框

 
<style type="text/css">
 
input.borderInput {
	background-image: url(border.gif);;
	background-repeat: no-repeat;
	background-position: left top;
	border:1px solid #d5dee9;
	padding:3px;
}
 
</style>

上面的代码设置了一个背景图,并且左上对齐,当然,我们这个图片通常要宽一些、高一些,然后设置一个和渐变颜色近似的 border 。是的,一个效果柔和的边框实现了。

如何用 CSS 将超出显示宽度的内容隐藏起来

在显示列表的时候,太长的标题默认会换行显示,而这样的显示方式往往会破坏我们原有的页面布局,如何在我们无法知道标题长度的情况下,将超出显示宽度的内容隐藏起来?一个常见的做法是用服务器端语言判断、截取,但是这样在以后需要显示更长的标题时就需要修改服务器端脚本。

这里介绍的是如何用 CSS 将超出显示宽度的内容隐藏起来,在 IE 下我们还可以添加一个省略号,来表示多余的字符已经截断,以后改版也更方便。

如何用 CSS 将超出显示宽度的内容隐藏起来 – 示例

 
<style type="text/css">
.textOverFlow {
	width:300px;
	overflow:hidden; 
	text-overflow:ellipsis;
	white-space:nowrap;
	border:1px solid #ddd;
}
</style>
 
<div class="textOverFlow">
	CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 
</div>

实现原理:

(1)指定宽度:width:300px;
(2)overflow:hidden; 将超出内容隐藏
(3)text-overflow:ellipsis; IE 专有属性,当对象内文本溢出时显示省略标记(…)
(4)white-space:nowrap; 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象。

如何用图片实现表单(form)的重置(reset)按钮

合理的运用图片,能够使站点更加丰富多彩,相信有许多喜欢用图片的设计师都遇到过一个问题:用图片实现表单(form)的重置(reset)按钮时,这个按钮并不能重置表单,相反却执行了提交表单的操作,本文说明了这个问题的原因,并给出了相应的解决方案。

出现上述问题的原因主要是:普通的按钮是通过类型来区分的,submit 为提交按钮,reset 为重置按钮,而类型为图片(type="image")的按钮,其默认操作是提交表单。因此,如果想用图片实现重置按钮,就需要一些额外的设置了。

如何用图片实现表单(form)的重置(reset)按钮 – 示例

一个简单包含提交、重置按钮的表单代码如下:

 
<form method="post" name="testForm_1" action="">
	<p><input type="text" name="keyword" /></p>
	<input type="submit" value="Submit" />
	<input type="reset" value="Reset" />
</form>

如果想用图片代替重置按钮,可以用下面的方法:

(1)给 type 为 image 的 input 添加 onclick 事件来实现重置,并通过添加 return false 来避免默认的提交操作:

 
<form method="post" name="testForm_2" action="">
	<p><input type="text" name="keyword" /></p>
	<input type="image" src="send.gif" />
	<input type="image" src="reset.gif" onclick="javascript:document.forms['testForm_2'].reset(); return false;" />
</form>

关键代码:

 
onclick="javascript:document.forms['testForm_2'].reset(); return false;"

document.forms[‘testForm_2′].reset(); 是将名称为 testForm_2 的表单重置。

return false; 是防止提交表单。

(2)直接用图片模拟的重置按钮

 
<form method="post" name="testForm_3" action="">
	<p><input type="text" name="keyword" /></p>
	<input type="image" src="send.gif" />
	<img src="reset.gif" alt="Reset" onclick="javascript:document.forms['testForm_3'].reset();" style="cursor:pointer;" />
</form>

关键代码:

 
onclick="javascript:document.forms['testForm_3'].reset(); "
 
style="cursor:pointer;"

document.forms[‘testForm_2′].reset(); 是将名称为 testForm_2 的表单重置。

style="cursor:pointer;" 设置图片悬停时,显示手型光标。

两种方法大同小异,在 javascript 被禁止的情况下,第二种方法按钮不会执行任何操作,而第一种方法却会执行提交操作。

当然,我们也可以直接把样式交给 CSS 去处理,用背景图的方式来实现,但是这样需要将 value 的值留空,如果 CSS 被禁止,那么将会显示一个没有文字的按钮,每个方法都有自己的问题,可以根据自己的需要来选择解决方案。

无图片制作带有 45 度斜角的导航菜单

带斜角的菜单通常是用图片来实现,而且往往需要避免重叠,本文介绍的是一个不用图片的解决方案,带斜角又不用图片,是不是很不可想象,没错,不用图片也可以做带斜角的导航菜单,赶快看看吧!

无图片制作带有 45 度斜角的导航菜单 – 示例

 
<style type="text/css">
 
/* for this demo only */
#slant {border-top:25px solid #fff; border-bottom:125px solid #fff;}
 
 
/* the stylesheet */
#slant {padding:0; margin:0; list-style:none;}
#slant li {float:left; text-align:center; margin-right:-20px;} 
#slant a {display:block; text-decoration:none;}
#slant a em {font-style:normal; display:block; padding:0 15px; height:25px; background:#363; float:left; cursor:pointer; color:#beb; line-height:24px;}
 
#slant a b, a span {cursor:pointer; display:block; width:0; overflow:hidden; float:left; background:#363;}
 
#slant a span {height:0; border-top:25px solid #363; border-right:25px solid #fff;}
 
#slant a b.p1,
#slant a b.p2,
#slant a b.p3,
#slant a b.p4,
#slant a b.p5 {border-top:5px solid #fff; border-right:5px solid #363;}
 
#slant a b.p1 {height:0; margin-top:20px;}
#slant a b.p2 {height:5px; margin-top:15px;}
#slant a b.p3 {height:10px; margin-top:10px;}
#slant a b.p4 {height:15px; margin-top:5px;}
#slant a b.p5 {height:20px;}
 
#slant a b.p6,
#slant a b.p7,
#slant a b.p8,
#slant a b.p9,
#slant a b.p10 {border-bottom:5px solid #fff; border-left:5px solid #363;}
 
#slant a b.p6 {height:20px;}
#slant a b.p7 {height:15px;}
#slant a b.p8 {height:10px;}
#slant a b.p9 {height:5px;}
#slant a b.p10 {height:0;}
 
#slant a:hover {background:#696;}
 
#slant a:hover em {color:#030; background:#696;}
 
#slant a:hover b.p1,
#slant a:hover b.p2,
#slant a:hover b.p3,
#slant a:hover b.p4,
#slant a:hover b.p5 {border-right-color:#696; background: #696;}
 
#slant a:hover b.p6,
#slant a:hover b.p7,
#slant a:hover b.p8,
#slant a:hover b.p9,
#slant a:hover b.p10 {border-left-color:#696; background: #696;}
 
#slant a:hover span {border-top-color:#696;}
 
</style>
 
<ul id="slant">
 
	<li><a href="#nogo1"><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><b class="p5"></b><em>Item One</em><span></span></a></li>
 
	<li><a href="#nogo2"><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><b class="p5"></b><em>Item Two</em><span></span></a></li>
 
	<li><a href="#nogo2"><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><b class="p5"></b><em>Longer Item Three</em><span></span></a></li>
 
	<li><a href="#nogo2"><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><b class="p5"></b><em>Four</em><span></span></a></li>
 
	<li><a href="#nogo2"><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><b class="p5"></b><em>.. and Five</em><span></span></a></li>
 
	<li><a href="#nogo2"><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><b class="p5"></b><em>6</em><b class="p6"></b><b class="p7"></b><b class="p8"></b><b class="p9"></b><b class="p10"></b></a></li>
 
</ul>

如此创意也许只有 Stu Nicholls 才会有,也许你看过之后会认为完全没有技术难度,但是为什么我们却没有第一个做出来?也许,我们什么都不缺,除了想象力。。。

CSSplay 本站已经多次强烈推荐,如果你的英文够好,可以通过下面的链接阅读原文:
http://www.cssplay.co.uk/menus/slanty.html

本站发布此代码已经通过原作者授权,如果您想转载或者用于其他用途,请直接和原作者联系!

带有二级菜单的滑动门效果

又是 CSSplay ,这个众多网页设计师心目中的圣地,总能带给我们诸多惊喜,Stu Nicholls 那富有创意并且高超的技巧,总能让一个个在我们看来不能实现的愿望变为现实。本文介绍的是他用 CSS 技术实现的带有二级菜单的滑动门效果,相信许多人期待已久了。

带有二级菜单的滑动门效果 – 示例

 
<style type="text/css">
/* ================================================================ 
This copyright notice must be untouched at all times.
 
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/doors_drop_line_three.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
 
/* for this demo only */
#nav {margin:20px 0 80px 0;}
 
/* the styling */
#nav {
	float:left; 
	width:650px; 
	height:auto; 
	background:#fff url("bottom_line.gif") repeat-x bottom; 
	position:relative;
}
 
#nav .select, #nav .current {
	margin:0; 
	padding:0; 
	list-style:none; 
	display:block;
}
 
#nav li {
	display:inline; 
	margin:0; 
	padding:0;
	height:auto;
}
 
#nav .select a,
#nav .current a {
	display:block; 
	height:21px; 
	float:left; 
	background: url("left_blue.gif") no-repeat left top; 
	padding:0 0 0 3px; 
	border-bottom:1px solid #000; 
	text-decoration:none; 
	font-size:10px; 
	line-height:20px; 
	white-space:nowrap; 
	margin-left:2px;
}
* html #nav .select a, * html #nav .current a {width:1px;}
 
#nav .select a b, 
#nav .current a b {
	height:100%; 
	display:block; 
	background:url("right_blue.gif") no-repeat right top; 
	padding:0 6px 0 3px; 
	color:#000;
}
 
#nav .select a:hover, 
#nav .select li:hover a {
	background-position:0 -75px; 
	border-color:#046; 
	cursor:pointer;
}
 
#nav .select a:hover b, 
#nav .select li:hover a b {
	background-position:100% -75px; 
	border-color:#046; color:#fff;
}
 
#nav .sub {display:none;}
 
/* for IE5.5 and IE6 only */
#nav table {
	position:absolute; 
	border-collapse:collapse; 
	left:0; 
	top:0; 
	font-size:11px;
}
 
#nav .current a {
	background-position:0 -75px; 
	border-color:#046;
}
#nav .current a b {
	background-position:100% -75px; 
	color:#ff6;
}
 
 
#nav .sub li a:hover, 
#nav .select a:hover .sub li a:hover, 
#nav .select li:hover .sub li a:hover {
	background:#005984 url("sub_sep.gif") top right no-repeat; 
	color:#fff; 
	text-decoration:underline;
}
 
#nav .sub_active .current_sub a, 
#nav .sub_active a:hover {
	background:#005984 url("sub_sep.gif") top right no-repeat; 
	color:#ff6; 
	text-decoration:underline;
}
 
#nav .select li a:hover .sub, 
#nav .select li:hover .sub {
	display:block; 
	position:absolute; 
	width:650px; 
	top:21px; 
	left:0; 
	background:#005984; 
	margin-top:1px; 
	padding:0; 
	z-index:100; 
	border-bottom:20px solid #fff;
}
 
#nav .sub, #nav .sub_active {
	margin:0; 
	padding:0; 
	list-style:none;
}
#nav .sub_active {
	display:block; 
	position:absolute; 
	width:650px; 
	top:21px; 
	left:0; 
	background:#005984; 
	margin-top:1px; 
	padding:0; 
	z-index:10; 
	color:#000; 
	border-bottom:20px solid #fff;
}
* html #nav .sub_active, * html #nav .select a:hover .sub {
	z-index:-1; 
	margin-top:0; 
	margin-top:1px;
}
 
#nav .sub_active a {
	height:25px; 
	float:left; 
	text-decoration:none; 
	line-height:24px; 
	white-space:nowrap; 
	font-weight:normal;
}
#nav .sub_active a, 
#nav .select a:hover .sub li a, 
#nav .select li:hover .sub li a {
	display:inline; 
	background:#005984 url("sub_sep.gif") top right no-repeat; 
	padding:0 10px; 
	margin:0; 
	font-size:10px; 
	width:auto; 
	white-space:nowrap; 
	font-weight:normal; 
	border:0; 
	color:#fff; 
	height:25px; 
	line-height:24px; 
}
</style>
 
<div id="nav">
 
 
<ul class="select"><li><a href="#"><b>January</b>
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub"><li><a href="#">Fish</a></li>
<li><a href="#">Chips</a></li>
<li><a href="#">Bacon</a></li>
<li><a href="#">Eggs</a></li>
<li><a href="#">Tomato</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>
 
 
<ul class="select"><li><a href="#"><b>February</b>
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
<li><a href="#">Sausages</a></li>
<li><a href="#">Fried Bread</a></li>
<li><a href="#">Fillet steak</a></li>
<li><a href="#">Mushrooms</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>
 
 
<ul class="select"><li><a href="#"><b>March</b>
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub"><li><a href="#">Lager</a></li>
<li><a href="#">Beer</a></li>
<li><a href="#">Red wine</a></li>
<li><a href="#">Crisps</a></li>
<li><a href="#">Brandy</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>
 
 
<ul class="select"><li><a href="#"><b>April</b>
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub"><li><a href="#">Tea</a></li>
<li><a href="#">Coffee</a></li>
<li><a href="#">Milk</a></li>
<li><a href="#">Squash</a></li>
<li><a href="#">Lemonade</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>
 
 
<ul class="current"><li><a href="#"><b>May</b>
</a></li></ul><ul class="sub_active"><li><a href="#">Crab</a></li>
<li><a href="#">Shrimps</a></li>
<li><a href="#">Lobster</a></li>
<li class="current_sub"><a href="#">Prawns</a></li>
<li><a href="#">Salmon</a></li>
</ul>
 
 
<ul class="select"><li><a href="#"><b>June</b>
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub"><li><a href="#">Jam</a></li>
<li><a href="#">Lemon Curd</a></li>
<li><a href="#">Marmalade</a></li>
<li><a href="#">Marmite</a></li>
<li><a href="#">Bovril</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>
 
 
<ul class="select"><li><a href="#"><b>July</b>
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub"><li><a href="#">Lamb</a></li>
<li><a href="#">Chicken</a></li>
<li><a href="#">Pork</a></li>
<li><a href="#">Beef</a></li>
<li><a href="#">Cheese</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>
 
 
<ul class="select"><li><a href="#"><b>August</b>
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub"><li><a href="#">Beach</a></li>
<li><a href="#">Country walk</a></li>
<li><a href="#">Photography</a></li>
<li><a href="#">Window shopping</a></li>
<li><a href="#">Gardening</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>
 
 
<ul class="select"><li><a href="#"><b>September</b>
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub"><li><a href="#">Tulips</a></li>
<li><a href="#">Sunflower</a></li>
<li><a href="#">Cyclamen</a></li>
<li><a href="#">Dahlia</a></li>
<li><a href="#">Gladiolus</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>
 
 
<ul class="select"><li><a href="#"><b>October</b>
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub"><li><a href="#">Cup</a></li>
<li><a href="#">Saucer</a></li>
<li><a href="#">Plate</a></li>
<li><a href="#">Fruit bowl</a></li>
<li><a href="#">Egg cup</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>
 
 
</div>

您可以通过下面的链接访问 cssplay 原页面:
http://www.cssplay.co.uk/menus/doors_drop_line_three.html