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. Solr与Lucene的区别

    Lucene是一个优秀的开源搜索库,Solr是在Lucene上封装的完善的搜索引擎.通俗地说,如果Solr是汽车,那么Lucene就是发动机,没有发动机,汽车就没法运转,但对于用户来说只可开车,不能开 ...

  2. 使用cgroups来控制磁盘IO带宽

    磨砺技术珠矶,践行数据之道,追求卓越价值 回到上一级页面:PostgreSQL内部结构与源代码研究索引页    回到顶级页面:PostgreSQL索引页 [作者 高健@博客园  luckyjackga ...

  3. Java：多线程中的volatile

    一.为什么使用volatile 首先,通过一段简单的代码来理解为什么要使用volatile: public class RunThread extends Thread{ private boolea ...

  4. Android 打印log 在logcat 看不到

    今天调试一个问题,因为是插件,只能通过打印log 定位问题. 但是打印了log 一直没有看到. 代码如下: Log.d("","aaaa24"); 后来发现是需 ...

  5. nexys4开发板使用-第一篇（未完成）

    1. 下去下个原理图.今天准备研究下DDR的控制,看介绍新一代的Nexys 4 DDR最值得被关注的改良是将原先的16 MiBCellularRAM升级为128 MiB的DDR2 SDRAM内存.Di ...

  6. 关于mongodb的mapReduce

    由于nodejs本身的限制,在程序中使用js进行大批量计算效率不高.而V8引擎自身对内存大小的限制(64位系统下1.4G),同样限制了数据规模. 因此,相对于从mongodb中抽出数据进行计算,在mo ...

  7. MySQL☞substr函数

    substr函数:截取字符串 格式如下: select  substr(参数1,参数2,参数3)  from  表名 参数1:列名/字符串 参数2:起始位置,如果为正数,就表示从正数的位置往下截取字符 ...

  8. 韦大仙--python对文件操作

    文件操作: 对文件操作流程 打开文件,得到文件句柄并赋值给一个变量 通过句柄对文件进行操作 关闭文件 现有文件如下 Somehow, it seems the love I knew was alwa ...

  9. CSP201312-2：ISBN号码

    引言:CSP(http://www.cspro.org/lead/application/ccf/login.jsp)是由中国计算机学会(CCF)发起的"计算机职业资格认证"考试, ...

  10. 对HashMap进行排序

    首先来看看Map集合获取元素的三种常见方法keySet().values().entrySet() 1. values():返回map集合的所有value的Collection集合(于集合中无序存放) ...