css3和html5打造的超酷的旋转效果的导航菜单

css3和html5打造的超酷的旋转效果的导航菜单，下拉菜单旋转显示，search框获取焦点会自动延长，效果很酷。但是，由于目前浏览器的局限性，请用IE9以上版本或者火狐或者谷歌等浏览器浏览才会有效果。
1、在head区插入下面代码

<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

2、在body中插入下面代码

<form id="searchform">
    <input type="search" id="s" placeholder="Search">
</form>
<nav>
    <ul class="fancyNav">
        <li id="home">
            <a href="#home" class="homeIcon">
                <div class="home-top"></div>
                <div class="home-top-r"></div>
                <div class="home-door-l"></div>
                <div class="home-door-r"></div>
            </a>
        </li>
        <li id="news"><a href="#news">前端设计</a>
            <ul>
                <li><a href="">HTML5</a></li>
                <li><a href="">CSS3</a></li>
                <li><a href="">JQUERY</a></li>
            </ul>
        </li>
        <li id="about"><a href="#about">编程语言</a>
            <ul>
                <li><a href="">PHP</a></li>
                <li><a href="">JAVA</a></li>
                <li><a href="">wordpress</a></li>
                <li><a href="">CodeIgniter</a></li>
            </ul>
        </li>
        <li id="services"><a href="#services">生活</a></li>
        <li id="contact"><a href="#contact">留言板</a></li>
        <form id="searchform">
            <input type="search" id="s" placeholder="Search">
        </form>
        <div style="display:block;clear:both;"></div>
    </ul>
</nav>