做web前端开发经常会遇到那种划到导航栏，会出现下拉菜单的的情况。

网上给出的那些原生态js效果太复杂

今天结合JQuery 做了一个，真是简单之极，几行代码就搞定了的基本功能。

HTML 部分

<a href="#" id="shangxia">JavaScript</a>

<div class="shangxia">

  显示的内容

</div>

JS 部分

<script type="text/javascript">

$(document).ready(function() {

       $('#shangxia').hover(function() {

               $('.shangxia').slideDown();

               $('.shangxia').css("visibility", "visible");

       });

       $(".shangxia").mouseleave(function() {

               $('.shangxia').slideUp();

       });

})

</script>

CSS 部分

.shangxia

{

position: absolute;

visibility: hidden;

width:500px;

height:200px;

border: 1px solid red;

}

有这么一个简单的基本框架，去扩充，思路就清晰多了！