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. 【BZOJ5290】[HNOI2018]道路（动态规划）

    [BZOJ5290][HNOI2018]道路(动态规划) 题面 BZOJ 洛谷 题目直接到洛谷上看吧 题解 开始写写今年省选的题目 考场上我写了一个模拟退火骗了\(90\)分...然而重测后只剩下45 ...

  2. 宁波Uber优步司机奖励政策（12月21日到12月27日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  3. 厦门Uber优步司机奖励政策（12月14日到12月20日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  4. 【Keras案例学习】 CNN做手写字符分类（mnist_cnn ）

    from __future__ import print_function import numpy as np np.random.seed(1337) from keras.datasets im ...

  5. Clojure基础课程2-Clojure中的数据长啥样?

    本文来自网易云社区 作者:李诺 " Clojure is elegant and pragmatic; it helps me focus more on solving business ...

  6. 如何用istio实现应用的灰度发布

    Istio为用户提供基于微服务的流量治理能力.Istio允许用户按照标准制定一套流量分发规则,并且无侵入的下发到实例中,平滑稳定的实现灰度发布功能. 基于华为云的Istio服务网格技术,使得灰度发布全 ...

  7. 「日常训练」Kefa and Dishes（Codeforces Round #321 Div. 2 D）

    题意与分析(CodeForces 580D) 一个人有\(n\)道菜,然后要点\(m\)道菜,每道菜有一个美味程度:然后给你了很多个关系,表示如果\(x\)刚好在\(y\)前面做的话,他的美味程度就会 ...

  8. 180606-Linux下jdk中文乱码问题解决

    文章链接:https://liuyueyi.github.io/hexblog/2018/06/06/180606-Linux下jdk中文乱码问题解决/ linux下jdk中文乱码问题解决 之前遇到过 ...

  9. JAVA基础学习之路（八）[1]String类的基本特点

    String类的两种定义方式: 直接赋值 通过构造方法赋值 //直接赋值 public class test2 { public static void main(String args[]) { S ...

  10. （python）leetcode刷题笔记 02 Add Two Numbers

    2. Add Two Numbers You are given two non-empty linked lists representing two non-negative integers. ...