9.jQuery之简洁版滑动下拉菜单

知识点：hover的使用，已经slideToggle的切换效果

     <style>
         * {
             margin: 0;
             padding: 0;
         }

         li {
             list-style-type: none;
         }

         a {
             text-decoration: none;
             font-size: 14px;
         }

         .nav {
             margin: 100px;
         }

         .nav>li {
             position: relative;
             float: left;
             width: 80px;
             height: 41px;
             text-align: center;
         }

         .nav li a {
             display: block;
             width: 100%;
             height: 100%;
             line-height: 41px;
             color: #333;
         }

         .nav>li>a:hover {
             background-color: #eee;
         }

         .nav ul {
             display: none;
             position: absolute;
             top: 41px;
             left: 0;
             width: 100%;
             border-left: 1px solid #FECC5B;
             border-right: 1px solid #FECC5B;
         }

         .nav ul li {
             border-bottom: 1px solid #FECC5B;
         }

         .nav ul li a:hover {
             background-color: #FFF5DA;
         }
     </style>
     <ul class="nav">
         <li>
             <a href="#">微博</a>
             <ul>
                 <li>
                     <a href="">私信</a>
                 </li>
                 <li>
                     <a href="">评论</a>
                 </li>
                 <li>
                     <a href="">@我</a>
                 </li>
             </ul>
         </li>
         <li>
             <a href="#">微博</a>
             <ul>
                 <li>
                     <a href="">私信</a>
                 </li>
                 <li>
                     <a href="">评论</a>
                 </li>
                 <li>
                     <a href="">@我</a>
                 </li>
             </ul>
         </li>
         <li>
             <a href="#">微博</a>
             <ul>
                 <li>
                     <a href="">私信</a>
                 </li>
                 <li>
                     <a href="">评论</a>
                 </li>
                 <li>
                     <a href="">@我</a>
                 </li>
             </ul>
         </li>
         <li>
             <a href="#">微博</a>
             <ul>
                 <li>
                     <a href="">私信</a>
                 </li>
                 <li>
                     <a href="">评论</a>
                 </li>
                 <li>
                     <a href="">@我</a>
                 </li>
             </ul>
         </li>
     </ul>

     <script>
         $(function () {
             // $(".nav li").mouseover(function () {
             //     $(this).children("ul").slideDown(100)
             // });
             // $(".nav li").mouseout(function () {
             //     $(this).children("ul").slideUp(100)
             // });

             // $(".nav li").hover(function () {
             //     $(this).children("ul").slideDown()
             // }, function () {
             //     $(this).children("ul").slideUp()
             // })

             $(".nav li").hover(function () {
                 $(this).children("ul").slideToggle()
             })
         })
     </script>