此教程，完全使用CSS3 制作一个动态的导航菜单，不使用 JavaScript 等技术。
先来看 HTML
首先第一步是使用HTML完成网站的结构，此处 使用了很多 HTML5 方面的内容，但是对于IE6 7 8来说，必须使用另一种技术来使其支持 HTML5，这里使用 html5.js （详细），需要放在 <Head> 标签之中，使用了条件判断，只对IE有效。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3 Animated Navigation Menu | Tutorialzine Demo</title>
<!-- Our CSS stylesheet file -->
<link rel="stylesheet" href="assets/css/styles.css" />
<!-- Including the Lobster font from Google's Font Directory -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster" />
<!-- Enabling HTML5 support for Internet Explorer -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<h1>CSS3 Animated Navigation Menu</h1>
<h2>« Read and download on Tutorialzine</h2>
</header>
<nav>
<ul class="fancyNav">
<li id="home"><a href="#home" class="homeIcon">Home</a></li>
<li id="news"><a href="#news">News</a></li>
<li id="about"><a href="#about">About us</a></li>
<li id="services"><a href="#services">Services</a></li>
<li id="contact"><a href="#contact">Contact us</a></li>
</ul>
</nav>
<footer>Looks best in Firefox 4, usable everywhere.</footer>
</body>
</html>此处使用了Google Web Font API,包括了100多种字体文件，可以随时使用在自己的项目上，当然都托管在 Google 的服务器上，不过几乎都是英文字体，对国内用处不是非常大。
更多…
导航是任何一个网站都不可或缺的部分，对于很多大型的网站来说，很多都使用下拉菜单，这样可以使访客更快的找到需要的内容。本文将包含25个使用jQuery脚本制作的下拉菜单，当然，其中很多都不错呢。
Sexy Drop Down Menu with jQuery and CSS
[使用jQuery和CSS制作的性感菜单]
How to Create a Drop Down Nav Menu with HTML5, CSS3, and jQuery
[如何使用HTML5、CSS3和jQuery创建一个下拉菜单]
