1.jQuery写法

<head>

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

<title>下拉菜单</title>

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

<style type="text/css">

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

    #menu{width:100px; height:35px; font-family:'微软雅黑'; background-color:#0C6; text-align:center; font-size:24px; line-height:35px; vertical-align:middle; color:#fff;}

    #menu:hover{cursor:pointer;}

    .menu1{width:100px; height:35px; font-family:'微软雅黑'; background-color:#FC0; text-align:center; font-size:24px; line-height:35px; vertical-align:middle; color:#fff; list-style:none; }

    #menu1{margin:0px; width:100px; padding:0px; display:none;}

    .menu1:hover{ cursor:pointer; background-color:#F93}

    /*橘子*/

    #jz{ position:absolute;  left:100px; top:70px; display:none;}

    .jz1{ width:100px; height:35px; background-color:#3C3; list-style:none;}

    .jz1:hover{ cursor:pointer; background-color:#0F3}

    /*香蕉*/

    #xj{ position:absolute;  left:100px; top:105px; display:none; }

    .xj1{ width:100px; height:35px; background-color:#3C3; list-style:none;}

    .xj1:hover{ cursor:pointer; background-color:#0F3}

    /*苹果*/

    #pg{ position:absolute;  left:100px; top:35px; display:none; }

    .pg1{ width:100px; height:35px; background-color:#3C3; list-style:none;}

    .pg1:hover{ cursor:pointer; background-color:#0F3}

</style>

</head>

<body>

    <div id="menu" class="menu" >菜单</div>

        <ul id="menu1">

            <li class="menu1">苹果

                <ul id="pg" class="pg">

                    <li class="pg1">淡绿</li>

                    <li class="pg1">草绿</li>

                    <li class="pg1">绿色</li>

                </ul>

            </li>

            <li class="menu1">橘子

                <ul id="jz" class="jz">

                    <li class="jz1">橘黄</li>

                    <li class="jz1">橘红</li>

                    <li class="jz1">绿色</li>

                </ul>

            </li>

            <li class="menu1">香蕉

                <ul id="xj" class="xj">

                    <li  class="xj1">黄色</li>

                    <li class="xj1">柠檬黄</li>

                    <li class="xj1">土黄</li>

                </ul>

            </li>

            <li class="menu1">葡萄</li>

            <li class="menu1">菠萝</li>

        </ul>

</body>

    <script type="text/jscript">

        $(document).ready(function(e) {

            $("#menu").mouseover(function(e){

                $("#menu").css("background-color","#093");

                $("#menu1").css("display","block");

                });

            $("#menu").mouseout(function(e){

                $("#menu").css("background-color","#0C6");

                $("#menu1").css("display","none");

                });

            $(".menu1").mouseover(function(e){

                $("#menu1").css("display","block");

                $(this).children(".jz").css("display","block");

                //(this).children(".jz"):this代表是“.menu1”这个选择器，后面的children（）代表的是".menu"下面的直接子元素

                $(this).children(".xj").css("display","block");

                $(this).children(".pg").css("display","block");

                });

            $(".menu1").mouseout(function(e){

                $("#menu1").css("display","none");

                $(this).children(".jz").css("display","none");

                $(this).children(".xj").css("display","none");

                $(this).children(".pg").css("display","none");

                });

        });

    </script>

</html>

2.js写法:

<head>

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

<title>无标题文档</title>

<style type="text/css">

#fx

{

    width:100px;

    height:30px;

    background-color:#60F;

    color:white;

    font-weight:bold;

    text-align:center;

    line-height:30px;

    vertical-align:middle;

}

#fx:hover

{

    cursor:pointer;

    background-color:#;

}

#menu

{

    width:100px;

}

.f

{

    width:100px;

    height:30px;

    background-color:#F06;

    color:white;

    font-weight:bold;

    text-align:center;

    line-height:30px;

    vertical-align:middle;

}

</style>

</head>

<body>

<div id="fx" onmouseover="showlist()" onmouseout="hidelist()">分类</div>

<div id="menu" style="display:none" onmouseover="showlist()" onmouseout="hidelist()">

    <div class="f">家电</div>

    <div class="f">数码</div>

    <div class="f">手机</div>

    <div class="f">衣服</div>

</div>

</body>

<script type="text/javascript">

function showlist()

{

    document.getElementById("menu").style.display="block";

}

function hidelist()

{

    document.getElementById("menu").style.display="none";

}

</script>

</html>

js和jQuery写简单下拉菜单的更多相关文章

  1. jquery实现多级下拉菜单

    支持多种浏览器,体验效果:http://keleyi.com/keleyi/phtml/jqmenu/4.htm 多级菜单,理论上支持无限多的层级,文件结构非常简单的,以下是完整代码: <!DO ...

  2. 仿新浪游戏频道js多栏目全屏下拉菜单导航条

    仿新浪游戏频道js多栏目全屏下拉菜单导航条,新浪,游戏频道,js组件,多栏目,全屏下拉,下拉菜单,导航条.代码下载地址:http://www.huiyi8.com/sc/26765.html更多请访问 ...

  3. jQuery+Superfish制作下拉菜单

    superfish制作下拉菜单真的很方便而好很好用,而且还可以通过Superfish提供的参数来控制下拉菜单的不同效果,而且他没有层级限制,换句话说可以通过Superfish来写你想要的层级菜单. 官 ...

  4. CSS写动态下拉菜单 -----2017-03-27

    动态网站第一步:动态下拉菜单 关键点: overflow:hidden max-height xx:hover {} 设置当鼠标移上之后的效果 transition:   设置过度时间 cursor: ...

  5. JQuery设置获取下拉菜单选项的值 多实例

    分享下JQuery如何设置获取下拉菜单某个选项的值,多种方法,值得收藏. JQuery获取和设置Select选项 获取Select :获取select 选中的 text :$(“#ddlRegType ...

  6. 基于jquery网站左侧下拉菜单

    网站左侧下拉菜单jQuery代码.这是一款蓝色风格的适合做后台下拉菜单代码.效果图如下: 在线预览   源码下载 实现的代码: <div class="container"& ...

  7. 用原生JS实现的一个导航下拉菜单，下拉菜单的宽度与浏览器视口的宽度一样（js+html+css）

    这个导航下拉菜单需要实现的功能是:下拉菜单的宽度与浏览器视口的宽度一样宽:一级导航只有两项,当鼠标移到一级导航上的导航项时,相应的二级导航出现.在本案例中通过改变二级导航的高度来实现二级导航的显示和消 ...

  8. jquery 只有二级下拉菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. jQuery cxSelect 联动下拉菜单

    插件简介 cxSelect 是基于 jQuery 的多级联动菜单插件,适用于省市.商品分类等联动菜单. 列表数据通过 AJAX 获取,也可以自定义,数据内容使用 JSON 格式. 同时兼容 Zepto ...

随机推荐

  1. php知识--递归

    <?php // /* * 遍历输出文件夹中的所有内容 * @param1 string $dir,要遍历的路径 * @param2 int $level = 0,当前的级别 */ functi ...

  2. C语言与管道

    int main() { int s; int n; float avg; scanf("%d,%d",&s,&n); //特别注意的地方 // scanf(&qu ...

  3. The basic introduction to MIX language and machine

    reference: The MIX Computer, The MIX Introduction sets, The basic info storage unit in MIX computer ...

  4. SQL Server 中大小写区分的处理

    SQL Server 中大小写区分的处理. 默认情况下,SQL Server 里面是不区分大小写的: E:\>sqlcmd -S "localhost\SQLEXPRESS" ...

  5. vcredist作用

    一.vcredist作用: vcredist_x86.exe是微软公司Visual C++的32位运行时库,包含了一些Visual C++的库函数. vcredist_x64.exe是微软公司Visu ...

  6. phome_enewsclass 数据表字段解释（栏目主表）

    字段名 类型 解释 附加说明 classid smallint(6) 栏目ID   bclassid smallint(6) 父栏目ID   classname varchar(50) 栏目名称   ...

  7. 解决libc.so.6: version `GLIBC_2.14' not found问题, 升级glibc,glibc-2.15

    0.以下在系统CentOS 6.3 x86_64上操作 1.试图运行程序,提示"libc.so.6: version `GLIBC_2.14' not found",原因是系统的g ...

  8. Ubuntu下远程访问MySQL数据库

    MySQL远程访问的命令 格式: mysql -h主机地址 -u用户名 -p用户密码 jack@jack:~$ mysql -h192.168.5.154 -usaledata -pEnter pas ...

  9. .Net MVC 入门之Razor语法

    Razor语法 Razor是以后MVC项目中都需要用的, 所以在学MVC的基础的时候,我们的目标:要了解熟悉Razor页面的语法结构,做到灵活使用,so我们马上开始学习Razor,也请你们多评论和推荐 ...

  10. sql Servers数据库基础

    1. 数据库约束包含:     ·非空约束     ·主键约束(PK) primary key constraint 唯一且不为空     ·唯一约束(UQ) unique constraint 唯一 ...