由纯CSS3实现的超酷飞行状下拉菜单特效

日期：2012-4-26??来源：GBin1.com

在线演示? 本地下载

今天介绍一款来自script-tutorial的超酷飞行状菜单特效，和传统的下拉菜单不同，它的子菜单都是水平飞入而非滑动下拉出现，非常的与众不同，希望大家喜欢！

首先这里我们定义HTML菜单项目，使用li来构建菜单内容，如下：

<ul id="nav">    <li><a href="http://www.script-tutorials.com/">Home</a></li>    <li><a href="#">Menu 1</a>        <ul href="#">Menu 2</a>        <ul href="#">Menu 3</a>        <ul class="subs">            <li><a href="#">Submenu 3-1</a></li>            <li><a href="#">Submenu 3-2</a></li>            <li><a href="#">Submenu 3-3</a></li>            <li><a href="#">Submenu 3-4</a></li>            <li><a href="#">Submenu 3-5</a></li>        </ul>    </li>    <li><a href="#">Menu 4</a></li>    <li><a href="#">Menu 5</a></li>    <li><a href="#">Menu 6</a></li>    <li><a href="http://www.script-tutorials.com/flying-css3-navigation-menu/">Back</a></li></ul>

定义CSS代码：

...

来源：由纯CSS3实现的超酷飞行状下拉菜单特效