第72天：jQuery实现下拉菜单

jQuery实现下拉菜单

一、居中
1、块元素居中：给块元素本身设置：margin:0 auto;，块元素必须设置宽度
2、行内块元素居中：给元素父级设置text-algin:center;
  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         *{
  8             margin: 0;
  9             padding: 0;
 10             list-style: none;
 11         }
 12         .nav{
 13             width: 100%;
 14             height: 40px;
 15             background: #0044DD;
 16             margin: 100px auto;
 17         }
 18         .nav .item{
 19            /* font-size: 0;*/
 20             width: 606px;
 21         margin:0 auto;
 22 
 23         }
 24         .nav .item li{
 25             font-size: 16px;
 26             width: 100px;
 27             height: 40px;
 28            /* display: inline-block;*/
 29             float: left;
 30             line-height:40px;
 31             text-align: center;
 32             border-right: 1px solid #CCCCCC;
 33             position: relative;
 34             margin-bottom: 0;
 35         }
 36 
 37         .nav li a{
 38             text-decoration: none;
 39             color: #ffffff;
 40         }
 41         .nav .item ul{
 42             position: absolute;
 43             left:0;
 44             top:40px;
 45             display: none;
 46         }
 47         .nav .item ul li{
 48             font-size: 16px;
 49             width: 100px;
 50             height: 40px;
 51             background-color: #2B93D2;
 52             border-top:1px solid #CCCCCC;
 53 
 54         }
 55     </style>
 56     <script src="jquery-1.11.1.min.js"></script>
 57     <script>
 58         $(document).ready(function(){
 59             /*$(".nav li").hover(function(){
 60                 $(this).children("ul").show();
 61             },function(){
 62                 $(this).children("ul").hide();
 63             });*/
 64             $(".item li").hover(function(){
 65                 $(this).children("ul").slideToggle();
 66             });
 67         });
 68     </script>
 69 </head>
 70 <body>
 71 <div class="nav">
 72     <ul class="item">
 73         <li><a href="">网站首页</a>
 74             <ul>
 75                 <li><a href="">案例展示</a></li>
 76                 <li><a href="">案例展示</a></li>
 77                 <li><a href="">案例展示</a></li>
 78             </ul>
 79         </li>
 80         <li><a href="">新闻中心</a>
 81             <ul>
 82                 <li><a href="">案例展示</a></li>
 83                 <li><a href="">案例展示</a></li>
 84                 <li><a href="">案例展示</a></li>
 85             </ul>
 86         </li>
 87         <li><a href="">最新活动</a>
 88             <ul>
 89                 <li><a href="">案例展示</a></li>
 90                 <li><a href="">案例展示</a></li>
 91                 <li><a href="">案例展示</a></li>
 92             </ul></li>
 93         <li><a href="">产品中心</a>
 94             <ul>
 95                 <li><a href="">案例展示</a></li>
 96                 <li><a href="">案例展示</a></li>
 97                 <li><a href="">案例展示</a></li>
 98             </ul></li>
 99         <li><a href="">技术文章</a>
100             <ul>
101                 <li><a href="">案例展示</a></li>
102                 <li><a href="">案例展示</a></li>
103                 <li><a href="">案例展示</a></li>
104             </ul>
105         </li>
106         <li class="last"><a href="">关于我们</a>
107             <ul>
108                 <li><a href="">案例展示</a></li>
109                 <li><a href="">案例展示</a></li>
110                 <li><a href="">案例展示</a></li>
111             </ul>
112         </li>
113     </ul>
114 </div>
115 </body>
116 </html>

运行效果：