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

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

  1     <style>
  2         * {
  3             margin: 0;
  4             padding: 0;
  5         }
  6 
  7         li {
  8             list-style-type: none;
  9         }
 10 
 11         a {
 12             text-decoration: none;
 13             font-size: 14px;
 14         }
 15 
 16         .nav {
 17             margin: 100px;
 18         }
 19 
 20         .nav>li {
 21             position: relative;
 22             float: left;
 23             width: 80px;
 24             height: 41px;
 25             text-align: center;
 26         }
 27 
 28         .nav li a {
 29             display: block;
 30             width: 100%;
 31             height: 100%;
 32             line-height: 41px;
 33             color: #333;
 34         }
 35 
 36         .nav>li>a:hover {
 37             background-color: #eee;
 38         }
 39 
 40         .nav ul {
 41             display: none;
 42             position: absolute;
 43             top: 41px;
 44             left: 0;
 45             width: 100%;
 46             border-left: 1px solid #FECC5B;
 47             border-right: 1px solid #FECC5B;
 48         }
 49 
 50         .nav ul li {
 51             border-bottom: 1px solid #FECC5B;
 52         }
 53 
 54         .nav ul li a:hover {
 55             background-color: #FFF5DA;
 56         }
 57     </style>
 58     <ul class="nav">
 59         <li>
 60             <a href="#">微博</a>
 61             <ul>
 62                 <li>
 63                     <a href="">私信</a>
 64                 </li>
 65                 <li>
 66                     <a href="">评论</a>
 67                 </li>
 68                 <li>
 69                     <a href="">@我</a>
 70                 </li>
 71             </ul>
 72         </li>
 73         <li>
 74             <a href="#">微博</a>
 75             <ul>
 76                 <li>
 77                     <a href="">私信</a>
 78                 </li>
 79                 <li>
 80                     <a href="">评论</a>
 81                 </li>
 82                 <li>
 83                     <a href="">@我</a>
 84                 </li>
 85             </ul>
 86         </li>
 87         <li>
 88             <a href="#">微博</a>
 89             <ul>
 90                 <li>
 91                     <a href="">私信</a>
 92                 </li>
 93                 <li>
 94                     <a href="">评论</a>
 95                 </li>
 96                 <li>
 97                     <a href="">@我</a>
 98                 </li>
 99             </ul>
100         </li>
101         <li>
102             <a href="#">微博</a>
103             <ul>
104                 <li>
105                     <a href="">私信</a>
106                 </li>
107                 <li>
108                     <a href="">评论</a>
109                 </li>
110                 <li>
111                     <a href="">@我</a>
112                 </li>
113             </ul>
114         </li>
115     </ul>
116 
117     <script>
118         $(function () {
119             // $(".nav li").mouseover(function () {
120             //     $(this).children("ul").slideDown(100)
121             // });
122             // $(".nav li").mouseout(function () {
123             //     $(this).children("ul").slideUp(100)
124             // });
125 
126             // $(".nav li").hover(function () {
127             //     $(this).children("ul").slideDown()
128             // }, function () {
129             //     $(this).children("ul").slideUp()
130             // })
131 
132             $(".nav li").hover(function () {
133                 $(this).children("ul").slideToggle()
134             })
135         })
136     </script>