<div id="wrap">
	<div class="main">
        <h1>水平导航下拉动画菜单</h1>
        <nav>
            <div class="h-nav">
                <ul class="clearfix">
                    <li><a href="#" class="current">热门下载</a>
                        <ul class="sub-nav">
                            <li><a href="#">PSD下载</a></li>
                            <li><a href="#">笔刷</a></li>
                            <li><a href="#">纹理背景</a></li>
                            <li><a href="#">设计师壁纸</a></li>
                            <li><a href="#">神器下载</a></li>
                        </ul>
                    </li>
                    <li><a href="#">界面图标设计</a>
                        <ul class="sub-nav">
                            <li><a href="#">WEB UI元素</a></li>
                            <li><a href="#">APP UI元素</a></li>
                            <li><a href="#">icons</a></li>
                            <li><a href="#">Logo设计</a></li>
                            <li><a href="#">字体设计</a></li>
                            <li><a href="#">精美海报</a></li>
                        </ul>
                    </li>
                    <li><a href="#">PS教程文章</a></li>	
                    <li><a href="#">信息化视图</a></li>	
                    <li><a href="#">职场规划</a></li>	
                    <li><a href="#">酷站推荐</a></li>
                    
                </ul>
            </div>
        </nav>      
    </div>
</div>
body,div,h1,nav,ul,li,a,footer,p{
	margin:0;
	padding:0;}
nav,footer{
	display:block;}
body{
	font:1em "microsoft Yahei";
	background-color:#eee;
	}
a{
	color:#ccc;
	text-decoration:none;
	transition:all .2s ease-out;}
a:hover{
	color:#fff;}
.clearfix::after{
	content:"";
	display:block;
	clear:both;}
li{
	list-style:none;}
h1{
	text-align:center;
	color:#eee;
	padding:1em;}

#wrap{
	width:100%;
	background-color:#000;}
.main{
	width:700px;
	margin:0 auto;}
.h-nav>ul>li{
	float:left;
	position:relative;
	height:60px;/*高度超过小三角,避免鼠标热区丢失*/
	}
.h-nav a{
	display:block;
	padding:0.7em 1em;
	color:#eee;
	}
.h-nav a:hover,a.current{
	color:#fff;
	background-color:#0da4d3;}
.sub-nav{
	visibility:hidden;/*添加这个属性是为了避免在空白区域鼠标经过都能出现下拉菜单*/
	opacity:0;
	min-width:160px;
	position:absolute;	
  padding:10px 0;
  background-color:#0da4d3;
	transform:translateY(50px);
	transition:all .5s linear;
	}
.sub-nav::before{/*小三角*/
	content:"";
	position:absolute;
	top:-7px;
	left:20px;
	border-left:8px solid transparent;
	border-right:8px solid transparent;
	border-bottom:8px solid #0da4d3;
	}
.sub-nav a:hover{
	background-color:#1BC9DC;}
.h-nav>ul>li:hover .sub-nav{
	visibility:visible;/*添加这个属性是为了避免在空白区域鼠标经过都能出现下拉菜单*/
	display:block;
	opacity:1;	
	transform:translateY(8px);
	}
.h-nav>ul>li:hover>a{
	background-color:#0da4d3;}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.