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. silverlight 图形报表开发

    前端: <UserControl x:Class="SLThree.CharReport" xmlns="http://schemas.microsoft.com/ ...

  2. [python]PyCharm安装与激活

    一.安装 1.去官网下载安装包(http://www.jetbrains.com/pycharm/download/#section=windows) 2.下载完成之后双击即可点击安装,按照自己需求选 ...

  3. Spring源码分析——JdbcTemplate执行批量insert操作

    最近用到一个方法: @Override public int[] batchUpdate(String sql, final BatchPreparedStatementSetter pss) thr ...

  4. Please ensure JDK installation is valid and compatible with the current OS

    报错如下: Gradle sync failed: Could not run JVM from the selected JDK. Please ensure JDK installation is ...

  5. CDN 缓存策略(转)

    1.CDN加速原理    通过动态域名解析,网友的请求被分配到离自己最快的服务器.CDN服务器直接返回缓存文件或通过专线代理原站的内容.    网络加速+内容缓存,有效提供访问速度 2.CDN节点数量 ...

  6. protected修饰符详解

    protected这个修饰符,各大参考书都会这样说:访问权限为类内,包内和子类,因此在父类中定义的方法和成员变量如果为protected修饰的,是可以在不同包中的子类进行访问的,示例代码如下: pac ...

  7. react-native windows系统 红屏报assets缺失 500错误

    指定版本,react-native是facebook用mac系统开发的,windows系统兼容较差,新版本更是问题很多, 相对老版本更加稳定 react-native init demo --vers ...

  8. React中类定义组件constructor 和super

    刚开始学习React没多久,在老师的教程里看到了类组件的使用示例,但是和资料上有些冲突,而引发了一些疑问: 类组件中到底要不要定义构造函数constructor()? super()里边到底要不要传入 ...

  9. Siki_Unity_2-1_API常用方法和类详细讲解(下)

    Unity 2-1 API常用方法和类详细讲解(下) 任务101&102:射线检测 射线origin + direction:射线检测:射线是否碰撞到物体 (物体需要有碰撞器),碰撞物体的信息 ...

  10. 使用flask_limiter设定API配额

    前言 闲来无事,突然想到了以前做过的关于后台API安全方面的事,关于接口访问配额的设置,flask有没有很好的库支持呢?一找还真有!主要是对照了库的官方文档自己写了下dome,以供参考. # -*- ...