SOURCE

<nav class="nav">
    <ul class="navbar clearfix">
        <li><a href="#">首页</a></li>
        <li><a href="#">关于</a></li>
        <li>
            <a href="#">产品○</a>
            <ul class="subnav">
                <li><a href="#">产品1</a></li>
                <li><a href="#">产品2</a></li>
                <li><a href="#">产品3</a></li>
                <li><a href="#">产品4</a></li>
            </ul>
        </li>
        <li><a href="#">合作</a></li>
        <li><a href="#">联系</a></li>
    </ul>
</nav>
<p class="p1"></p>

/*css reset */
body,p,div,ol,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,iframe,nav {
    margin: 0;
    padding: 0;
}
body {
    font: 14px Microsoft YaHei;
} 
a {
    text-decoration: none; 
} 
ol,ul {
    list-style: none;
} 
.clearfix::before,.clearfix::after {
    content: '';
    display: table;
    clear: both;
}
.nav {
    width: 100%;
    height: 50px;
    background: #f64;
} 
.nav .navbar {
    width: 1000px;
    max-width: 100%;
    margin: 0 auto;
}
.navbar li {
    width: 120px;
    height: 50px;
    float: left;
    text-align: center;
}
.navbar li a {
    font: 16px/50px Microsoft YaHei;
    color: #fff;
    padding: 10px 20px;
}
.navbar li a:hover {
    color: #eee;
}
.navbar li .subnav {
    width: 100%;
    border-radius: 0 0 3px 3px;
    background: #f64;
    overflow: hidden;
    transform-origin: 50% 0;
    transform: perspective(650px) rotateX(90deg);
}
.navbar li:hover .subnav {
    transform: perspective(650px) rotateX(0);
    transition: .6s;
}
.navbar li .subnav li {
    float: none;
}
.p1 {
    width: 100%;
    height: 1px;
    background: #eee;
    margin-top: 10px;
}
input {
    vertical-align:text-bottom; margin-bottom:2px;
}