<!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. QVariantMap 和 QVariant

    typedef QVariantMap Synonym for(同义词) QMap<QString, QVariant>. QVariant类型的放入和取出必须是相对应的,你放入一个int ...

  2. NAS,IP SAN以及iSCSCI SAN存储的一些认识和理解

    由 cxemc 在 2013-9-24 上午9:12 上创建,最后由 cxemc 在 2013-9-24 上午9:12 上修改 版本 1 1. NAS和SAN存储 a. NAS本身可以做为一台网络设备 ...

  3. Ubuntu18.04开机动画（bootsplash）安装

    一.搜索喜欢的主题 1.通过软件源搜索,这个比较简单但是没有太喜欢的.-----------------------------------------------------------pipci@ ...

  4. intelij idea 2018 license server

    http://www.cnblogs.com/jin-zhe/p/9267912.html

  5. Java 有状态和无状态对象的区别

    无状态会话Bean   无状态就是对于一次操作,不能保存数据.无状态对象(Stateless Bean)是没有实例变量的对象,不能保存数据,是不变类,是线程安全的.例如:  public class ...

  6. HDU 1402 A * B Problem Plus ——（大数乘法，FFT）

    因为刚学fft,想拿这题练练手,结果WA了个爽= =. 总结几点犯的错误: 1.要注意处理前导零的问题. 2.一定要注意数组大小的问题.(前一个fft的题因为没用到b数组,所以b就没管,这里使用了b数 ...

  7. hadoop 2.x HA 出现ssh不能解析问题记录。

    在docker里面安装hadoop HA 在启动或者停止的时候报ssh不能解析问题. 问题现象: 发现图片不清晰:把问题现象粘贴如下: root@master:/usr/local/hadoop-2. ...

  8. 小程序自定义底部tab

    首页wxml的代码: <view class="nav" hover-class="none"> <view class="inde ...

  9. LUA table中函数的调用

    1 lua中函数作为表中元素时有三种定义方式 采用‘:’来定义,实际上隐藏了一个形参的声明,这个形参会截获调用函数时的第一个实参并把它赋值给self 2 调用方式,点号和冒号 functb:hello ...

  10. IO流——常用IO流详解

    1:字节流 字节流:用于处理以字节为单位的二进制文件(如音乐,图片等) InputStream 是抽象类 它的对应子类FileInputStream可以被实例化 构造方法: FileInputStre ...