<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>阿里西西导航菜单特效</title>
    <style type="text/css">
        .nav{float:left;position:relative;width:253px;}
        h2,ul,p{margin:0;padding:0;text-align:center;}
        h2{font-weight:400;font-size:100%;background:#9B203F;border-bottom:solid 1px #500C1B;}
        h2 a{list-style-type:none;height:37px;color:#fff;line-height:37px;}
        ul{font-size:0;background:#9B203F;padding:0 0 40px;}
        ul li{list-style-type:none;padding-bottom:5px;color:#fff;font-size:14px;padding:0 20px;height:34px;line-height:34px;position:relative;}
        ul li a{border-bottom:dashed 1px #E67A92;display:block;width:196px;margin:0 auto;}
        ul li.hover_bg{background:#C30431;}
        .Secon_Dary{width:253px;background:#C30431;position:absolute;right:-253px;top:0;padding-bottom:30px;display:none;}
        .Secon_Dary p{padding:0 20px;}
        .Secon_Dary a{display:block;height:34px;line-height:34px;color:#fff;border-bottom:dashed 1px #E67A92;}
        a{cursor:pointer;}
    </style>
    <script src="http://www.alixixi.com/script/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(".nav ul li").hover(function(){
                $(this).addClass("hover_bg");
                $(this).children("div").show();
            },function(){
                $(this).removeClass("hover_bg");
                $(this).children("div").hide();
            })

        })
    </script>
</head>

<body>
<div class="nav">
    <h2><a>ALL CATEGORIES</a></h2>
    <ul>
        <li>
            <a>Posojg</a>
            <div class="Secon_Dary">
                <p>
                    <a href="http://js.alixixi.com">网页特效</a>
                    <a>BBBBBB</a>
                    <a>AAAAAAAAAAA</a>
                    <a>BBBBBB</a>
                    <a>AAAAAAAAAAA</a>
                    <a>BBBBBB</a>
                    <a>AAAAAAAAAAA</a>
                    <a>BBBBBB</a>
                </p>
            </div>
        </li>
        <li>
            <a>FOwojg</a>
            <div class="Secon_Dary">
                <p>
                    <a href="http://www.alixixi.cn/dvd/">网页模板</a>
                    <a>BBBBBB</a>
                    <a>AAAAAAAAAAA</a>
                    <a>BBBBBB</a>
                    <a>AAAAAAAAAAA</a>
                    <a>BBBBBB</a>
                    <a>AAAAAAAAAAA</a>
                    <a>BBBBBB</a>
                </p>
            </div>
        </li>
        <li>
            <a>Sowgjed</a>
            <div class="Secon_Dary">
                <p>
                    <a href="http://www.alixixi.com">网页制作教程</a>
                    <a>BBBBBB</a>
                    <a>AAAAAAAAAAA</a>
                    <a>BBBBBB</a>
                    <a>AAAAAAAAAAA</a>
                    <a>BBBBBB</a>
                    <a>AAAAAAAAAAA</a>
                    <a>BBBBBB</a>
                </p>
            </div>
        </li>
        <li>
            <a>Gowjgeo</a>
            <div class="Secon_Dary">
                <p>
                    <a>AAAAAAAAAAA</a>
                    <a>BBBBBB</a>
                    <a>AAAAAAAAAAA</a>
                    <a>BBBBBB</a>
                    <a>AAAAAAAAAAA</a>
                    <a>BBBBBB</a>
                    <a>AAAAAAAAAAA</a>
                    <a>BBBBBB</a>
                </p>
            </div>
        </li>
    </ul>
</div><!--nav-->
</body>
</html>

菜单特效jq的更多相关文章

  1. 一款jQuery立体感动态下拉导航菜单特效

    一款jQuery立体感动态下拉导航菜单特效,鼠标经过,在菜单栏上方下拉出一个背景图片,效果十分不错的一款jquery特效. 对IE6都是兼容的,希望大家好好研究研究. 适用浏览器:IE6.IE7.IE ...

  2. 一款jquery编写图文下拉二级导航菜单特效

    一款jquery编写图文下拉二级导航菜单特效,效果非常简洁大气,很不错的一款jquery导航菜单特效. 这款jquery特效适用于很多的个人和门户网站. 适用浏览器:IE8.360.FireFox.C ...

  3. ASP.NET MVC搭建项目后台UI框架—2、菜单特效

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

  4. JavaScript实战-菜单特效

    以下是我自己用原生JS写的各种菜单特效,虽然网上一搜一大堆,但我还是喜欢自己来写一写! 这是上一篇:JavaScript实战(带收放动画效果的导航菜单) 下面是经过优化后的完整代码,优化了CSS样式. ...

  5. CSS3超酷移动手机滑动隐藏側边栏菜单特效

    这是一组共4种效果很炫酷的CSS3移动手机滑动隐藏側边栏菜单特效. 这四种效果各自是:默认的点击滑动側边栏菜单效果.带3D transforms的滑动側边栏效果.文字缩放和淡入淡出效果的滑动側边栏以及 ...

  6. 20款jquery下拉导航菜单特效代码分享

    20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...

  7. Cocos2d-X中实现菜单特效

    Cocos2d-X中能够讲菜单和动作结合起来使用实现菜单特效 程序实例1:使用菜单和动作的组合实现菜单特效<一> #include "MenuItem.h" CCSce ...

  8. Android滑动菜单框架完全解析，教你如何一分钟实现滑动菜单特效

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/8744400 之前我向大家介绍了史上最简单的滑动菜单的实现方式,相信大家都还记得.如 ...

  9. CSS3实现扇形动画菜单特效

    CSS3实现扇形动画菜单特效 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <meta charset=&q ...

随机推荐

  1. 发布新的模型类包（用于上传到 NuGet 服务器上）

    生成包文件: 1.修改了模型类之后,在项目上点击右键,在列表菜单中选择 “编辑 …….csproj”,然后将里面的三个版本号都换成新的版本号. 2.右键项目,点击“打包” 3.复制输出信息中生成的包的 ...

  2. jQuery相关方法7----各种事件和绑定事件

    一.jQuery事件 1.鼠标事件 click与dbclick事件 click事件其实是由mousedown与mouseup 2个动作构成,所以点击的动作只有在松手后才触发 $ele.click(): ...

  3. STL备忘

    STL备忘 lower_bound 查找第一个大于或等于的数,返回该数字的地址,地址减去首地址即得到数组下标(首地址下标为0) upper_bound 查找第一个大于的数 unique 去重,常用于离 ...

  4. Poj 2114 Boatherds(点分治)

    Boatherds Time Limit: 2000MS Memory Limit: 65536K Description Boatherds Inc. is a sailing company op ...

  5. 第90节：Java中的Linux基础

    第90节:Java中的Linux基础 linux是装载虚拟机上面的: JDK依赖包: yum install glibc.i686 MYSQL依赖包: yum -y install libaio.so ...

  6. 二分算法题目训练(一)——Shell Pyramid详解

    HDU2446——Shell Pyramid 详解 Shell Pyramid 题目描述(Google 翻译的) 在17世纪,由于雷鸣般的喧嚣,浓烟和炽热的火焰,海上的战斗与现代战争一样.但那时,大炮 ...

  7. pyCharm专业版破解方案【附：四种破解】

    前言: 一般适合我们的工具才是好的工具,通过调研对比发现pycharm还不错,其它工具就不一一列举了 pyCharm社区版可以永久免费,但是它不支持HTML, JS, and SQL等,为了方便以后使 ...

  8. 微信小程序入门与实战 从0到1进行细致讲解 涵盖小程序开发核心技能下载

    第1章 什么是微信小程序? 第2章 小程序环境搭建与开发工具介绍 第3章 从一个简单的“欢迎“页面开始小程序之旅 第4章 第二个页面:新闻阅读列表 第5章 小程序的模板化与模块化 第6章 构建新闻详情 ...

  9. rethinkDB python入门

    Start the server For a more detailed look, make sure to read the quickstart. $ rethinkdb Import the ...

  10. Kettle中ETL的效率优化

    ETL效率优化 开启数据库日志记录及性能监控 如果我们想要优化一个ETL(KTR或者KJB)的性能,我们首先需要知道的就是它的瓶颈在哪里.而这些信息一般只能在ETL运行的步骤度量中看到,并且是不会持久 ...