第72天：jQuery实现下拉菜单

jQuery实现下拉菜单

一、居中

1、块元素居中：给块元素本身设置：margin:0 auto;，块元素必须设置宽度

2、行内块元素居中：给元素父级设置text-algin:center;

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <style>
         *{
             margin: 0;
             padding: 0;
             list-style: none;
         }
         .nav{
             width: 100%;
             height: 40px;
             background: #0044DD;
             margin: 100px auto;
         }
         .nav .item{
            /* font-size: 0;*/
             width: 606px;
         margin:0 auto;

         }
         .nav .item li{
             font-size: 16px;
             width: 100px;
             height: 40px;
            /* display: inline-block;*/
             float: left;
             line-height:40px;
             text-align: center;
             border-right: 1px solid #CCCCCC;
             position: relative;
             margin-bottom: 0;
         }

         .nav li a{
             text-decoration: none;
             color: #ffffff;
         }
         .nav .item ul{
             position: absolute;
             left:0;
             top:40px;
             display: none;
         }
         .nav .item ul li{
             font-size: 16px;
             width: 100px;
             height: 40px;
             background-color: #2B93D2;
             border-top:1px solid #CCCCCC;

         }
     </style>
     <script src="jquery-1.11.1.min.js"></script>
     <script>
         $(document).ready(function(){
             /*$(".nav li").hover(function(){
                 $(this).children("ul").show();
             },function(){
                 $(this).children("ul").hide();
             });*/
             $(".item li").hover(function(){
                 $(this).children("ul").slideToggle();
             });
         });
     </script>
 </head>
 <body>
 <div class="nav">
     <ul class="item">
         <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>
         <li><a href="">技术文章</a>
             <ul>
                 <li><a href="">案例展示</a></li>
                 <li><a href="">案例展示</a></li>
                 <li><a href="">案例展示</a></li>
             </ul>
         </li>
         <li class="last"><a href="">关于我们</a>
             <ul>
                 <li><a href="">案例展示</a></li>
                 <li><a href="">案例展示</a></li>
                 <li><a href="">案例展示</a></li>
             </ul>
         </li>
     </ul>
 </div>
 </body>
 </html>

运行效果：