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>

运行效果：

第72天：jQuery实现下拉菜单的更多相关文章

  1. jQuery水平下拉菜单实现

    <!DOCTYPE html> <html>    <head>       <title>jQuery水平下拉菜单实现</title>   ...

  2. jquery 实现下拉菜单

    Jquery 是一个轻量的框架,个人认为非常好用,今天就写一个非常简单的例子,实现下拉菜单功能: 首先肯定要在页面引用jquery.js  版本不限 : 接下来把=================== ...

  3. jquery带下拉菜单和焦点图

    jQuery,下拉菜单,二级菜单,索引按钮,焦点图代码,jquery带下拉菜单和焦点图是一款顶部通栏带二级下拉菜单和banner导航菜单代码. JQuery特效代码来源:http://www.huiy ...

  4. jQuery美化下拉菜单插件dropkick

    dropkick是一款基于jquery库的美化下拉框下拉菜单的插件,它通过定制HTML插入可使丑陋无聊的<select>下拉列表变得美丽. name属性是唯一一个必需的填写的,不过你也应该 ...

  5. JQuery纵向下拉菜单实现心得

    jquery库给我们带来了许多便利,不愧是轻量级的DOM框架,在前面的博文中小编分别对jquery的基础知识以及jquery的一些小demo有一系列的简单介绍,期待各位小伙伴的指导.使用jquery实 ...

  6. jQuery EasyUI 下拉菜单获取日期，最高年份为当前年份，最低年份为当前年份向前推10年

    http://blog.csdn.net/wangjingjing1014/article/details/16885341 <head><meta http-equiv=" ...

  7. jquery设置下拉菜单

    jQuery代码 1,引用jQuery库 2,show方法 3,hide方法 <script type="text/javascript"> $function(){ ...

  8. jquery多级下拉菜单

    var menu = new Click('#menu',{target:'p',parent:'li',contr:'ul',way:0}); /* 参数说明: target : 点击事件发生在该元 ...

  9. jquery实现下拉菜单

    需要实现的效果如图: <!DOCTYPE html> <html> <head lang="en"> <meta charset=&quo ...

随机推荐

  1. 前端chrome调试技巧

    待更新:http://blog.csdn.net/xueer767/article/details/65936204?locationNum=8&fps=1

  2. EnterpriseDB公司的 Postgres Solution Pack (一)

    下载地址: http://www.enterprisedb.com/products-services-training/products/postgres-plus-solution-pack/do ...

  3. LeetCode: 29. Divide Two Integers (Medium)

    1. 原题链接 https://leetcode.com/problems/divide-two-integers/description/ 2. 题目要求 给出被除数dividend和除数divis ...

  4. 图片文件转换成Base64编码实现ajax提交图片

    //上传头像图片 function uploadHead(imgPath) { console.log("imgPath = " + imgPath); var image = n ...

  5. 汽车VIN码，车架号，移动端，服务器端OCR识别 技术公司

    很多人在购买车辆的时候,只关注性能.外观.内饰等,其实真正的内行是首先看车辆的VIN码,也叫车架号码. VIN码(车架号码)是一辆车的唯一身份证明,一般在车辆的挡风玻璃处,有的在车辆防火墙上,或B柱铭 ...

  6. python3 小实践（一）——selenium获取的cookie传递

    from selenium import webdriver from time import sleep import requests import pickle #获取登录后的cookies c ...

  7. ADB连接不上手机，端口5037被占用的情况解决

    最近在搞手机APP自动化测试,adb连接手机时提示端口被占用 检测5037端口被谁占用,cmd窗口输入命令:netstat -ano | findstr "5037" (注意”50 ...

  8. JMeter自学笔记3-创建自己的第一个测试用例

    一.写在前面的话: 上篇我们已经认识了JMeter的图形界面,大家应该都是很懵的.那么这篇,我们将学习使用JMeter创建第一个属于自己测试用例. 二.创建自己的第一个测试用例: 1.新建一个Thre ...

  9. Linux命令应用大词典-第42章 PostgreSQL数据库

    42.1 initdb:初始化PostgreSQL数据库 42.2 pg_ctl:控制PostgreSQL服务 42.3 psql:PostgreSQL交互式客户端工具 42.4 createdb:创 ...

  10. <cfenv>(fenv.h) _c++11

    头文件 <cfenv>(fenv.h) c++11 浮点环境 这个头文件声明了一系列的函数和宏去访问浮点环境,以及特殊的类型. 浮点环境维护一系列的状态标志(status flags)和具 ...