<!doctype html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <script type="text/javascript" src="js/jquery.js"></script>

    <style type="text/css">

        *{margin:0px;padding:0px;}

        html,body{width:100%;height:100%;}

        #main{width:800px;margin:0 auto;}

        #menu_list{list-style-type:none;position:relative;width:100%;border:1px solid blue;border-bottom:none;float:left;}

        #menu_list .menu_item,#menu_list .menu_text{float:left;line-height:30px;}

        #menu_list .menu_item{margin:0px 20px 0px 0px;border:1px solid blue;}

        #menu_list .sub_item{display:none;position:absolute;top:30px;left:-1px;width:100%;border:1px solid red;border-top:none;height:360px;}

    </style>

    <script type="text/javascript">

     $(function(){

         var mst;

        $(".menu_item").hover(function(){

            var curItem =$(this);

            mst = setTimeout(function(){//延时触发

                curItem.find(".sub_item").slideDown("slow");

                mst = null;

            },350);

        },function(){

            if(mst!=null)clearTimeout(mst);

            $(this).find(".sub_item").slideUp("fast");

        });

     })

    </script>

</head>

<body>

    div[id="main"]>ul[id="menu_list"]>li[class="menu_item" id="menu_item_0$"]*8>span[id="menu_text_0$" class="menu_text"]{菜单标题$}+div[id="sub_item_0$" class="sub_item"]{子菜单内容$}

    <div id="main">

        <ul id="menu_list">

            <li class="menu_item" id="menu_item_01">

                <span id="menu_text_01" class="menu_text">菜单标题1</span>

                <div id="sub_item_01" class="sub_item">子菜单内容1</div>

            </li>

            <li class="menu_item" id="menu_item_02">

                <span id="menu_text_02" class="menu_text">菜单标题2</span>

                <div id="sub_item_02" class="sub_item">子菜单内容2</div>

            </li>

            <li class="menu_item" id="menu_item_03">

                <span id="menu_text_03" class="menu_text">菜单标题3</span>

                <div id="sub_item_03" class="sub_item">子菜单内容3</div>

            </li>

            <li class="menu_item" id="menu_item_04">

                <span id="menu_text_04" class="menu_text">菜单标题4</span>

                <div id="sub_item_04" class="sub_item">子菜单内容4</div>

            </li>

            <li class="menu_item" id="menu_item_05">

                <span id="menu_text_05" class="menu_text">菜单标题5</span>

                <div id="sub_item_05" class="sub_item">子菜单内容5</div>

            </li>

            <li class="menu_item" id="menu_item_06">

                <span id="menu_text_06" class="menu_text">菜单标题6</span>

                <div id="sub_item_06" class="sub_item">子菜单内容6</div>

            </li>

            <li class="menu_item" id="menu_item_07">

                <span id="menu_text_07" class="menu_text">菜单标题7</span>

                <div id="sub_item_07" class="sub_item">子菜单内容7</div>

            </li>

            <li class="menu_item" id="menu_item_08">

                <span id="menu_text_08" class="menu_text">菜单标题8</span>

                <div id="sub_item_08" class="sub_item">子菜单内容8</div>

            </li>

        </ul>

    </div>

</body>

</html>

demo:点击下载

菜单下拉效果demo记录的更多相关文章

  1. 在Mockplus中，如何做鼠标悬停时菜单下拉的效果？

    了解Mockplus的用户会知道,该原型工具目前并不直接支持鼠标悬停功能.但我经过尝试,发现想用它实现一个鼠标悬停事件并不是什么难事,比如网页设计中很常见的鼠标悬停时菜单下拉的效果,只要换个思路,利用 ...

  2. JS之document例题讲解1（两张表之间数据转移、日期时间选择、子菜单下拉、用div做下拉菜单、事件总结）

    作业一:两个列表之间数据从一个列表移动到另一个列表 <div style="width:600px; height:500px; margin-top:20px"> & ...

  3. EasyUI：年份、月份下拉框Demo

    EasyUI:年份.月份下拉框Demo jsp中定义: <td width="10%" height="25px" style="text-al ...

  4. html、css实现导航栏5种常用下拉效果

    实现的效果:鼠标移入按钮时按钮中的内容就会出现,分别展示不同的出现效果.效果难点:不使用JavaScript,那这个效果的难点就是在于:hover伪类的掌控,以及考验对html的结构掌握. 1. ht ...

  5. jQuery实现折叠下拉效果

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. 9月23日JavaScript作业----子菜单下拉

    例题一.子菜单下拉 <style type="text/css"> *{ margin:0px auto; padding:0px} #menu{ width:700p ...

  7. JS练习题（左侧菜单下拉+好友选中）

    题一.左侧菜单下拉 做题思路:先做菜单和子菜单,把子菜单默认隐藏.再用JS调样式. <style type="text/css"> *{ margin:0px auto ...

  8. CSS3--底部菜单上拉效果

    <!DOCTYPE html><html>    <head>        <meta charset="UTF-8">      ...

  9. lightinthebox头部分类菜单下拉导航，使鼠标移到See All Categories就显示下拉菜单

    lightinthebox头部分类菜单下拉导航,使鼠标移到See All Categories就显示下拉菜单 打开includes\templates\lightinthebox\common\tpl ...

随机推荐

  1. hdu 4135 Co-prime (素数打表+容斥原理)

    题目链接 题意:问从A到B中与N互素的个数. 题解: 利用容斥原理:先求出与n互为素数的个数. 可以先将 n 进行素因子分解,然后用区间 x 除以 素因子,就得到了与 n 的 约数是那个素因子的个数, ...

  2. Codeforces 429 B. Working out-dp( Codeforces Round #245 (Div. 1))

    B. Working out time limit per test 2 seconds memory limit per test 256 megabytes input standard inpu ...

  3. 转：nginx+CGI/FASTCGI

    简介版: 1.fastcgi与cgi区别:fastcgi通过线程来响应请求,而cgi对每个请求生成一个进程. 2.典型nginx数据传输过程:user->nginx->本地socket(请 ...

  4. (7) go 函数

    1.格式 调用 2.包 (1)包 本质 文件夹.每一个文件都必须属于一个包 (2)给包取别名 (3)函数的首字母大小,决定是否能被外包访问 (3) 3.多返回值 4.递归 5.基本数据类型和数组都是拷 ...

  5. POJ1845 Sumdiv [数论，逆元]

    题目传送门 Sumdiv Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 26041   Accepted: 6430 Des ...

  6. 洛谷P2751[USACO]工序安排

    题目传送门 怎么说呢,这个题目我刚开始随便乱搞了几下,交了个暴力代码上去居然还水了49分,数据确实有点弱啊,然后看到洛谷上那位大佬Redbag的题解瞬间就佩服的五体投地,那真的是简洁.易懂又高效.直接 ...

  7. grunt-contrib-qunit安装过程中phantomjs安装报错问题解决

    今天自己fork了一个github上别人写的一个关于grunt项目的一个小demo(https://github.com/cowboy/jquery-tiny-pubsub),主要是想学习下grunt ...

  8. 【Miller-Rabin算法】

    存个板子,应该是对的吧……没太试 http://www.cnblogs.com/Norlan/p/5350243.html Matrix67写的 根据wiki,取前9个素数当base的时候,long ...

  9. 【Manacher算法】poj3974 Palindrome

    Manacher算法教程:http://blog.csdn.net/ggggiqnypgjg/article/details/6645824 模板题,Code 附带注释: #include<cs ...

  10. 【最大权森林/Kruskal】POJ3723-Conscription

    [题目大意] 招募m+n个人每人需要花费$10000,给出一些关系,征募某个人的费用是原价-已招募人中和他亲密值的最大值,求最小费用. [思路] 人与人之间的亲密值越大,花费越少,即求出最大权森林,可 ...