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. python进阶4--pywin32

    python 在windows下系统编程 1.环境配置:Python是没有自带访问windows系统API的库的,需要下载.库的名称叫pywin32,可以从网上直接下载. 以下链接地址可以下载: ht ...

  2. hdoj 2546 饭卡(0-1背包)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2546 思路分析:该问题为0-1背包问题的变形题:问题求余额最少,设开始的余额为V,则求得用V-5可以买 ...

  3. 彻底解决Android因加载多个大图引起的OutOfMemoryError，内存溢出的问题

    最近因为项目里需求是选择或者拍摄多张照片后,提供滑动预览和上传,很多照片是好几MB一张,因为目前的Android系统对运行的程序都有一定的内存限制,一般是16MB或24MB(视平台而定),不做处理直接 ...

  4. VS EF Error： Configuration Error extension=".edmx" type="System.Data.Entity.Design.AspNet.EntityDesignerBuildProvider"

    错误截图: Configuration Error :<add extension=".edmx" type="System.Data.Entity.Design. ...

  5. POJ 1850 Code(找规律)

    Code Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 7913   Accepted: 3709 Description ...

  6. ADO.NET知识的运用一（Day 26）

    哈哈,又到了总结的时间了,来回顾一下今天主要学了关于ADO.NET的哪些知识吧.(这次学的ADO访问数据库主要以访问SQL数据库为主) 理论:  首先我们要知道为什么要学习ADO.NET? 因为我们之 ...

  7. Android adb 命令图解

    做了这么长时间的开发与管理,在命令上总是自见则过,往往却忽视了在其命令上的分享过程,所以现在稍微有点时间就把 其命令的相关操作来简单的扫盲一番吧,也系统通过这种方式去授之以渔而不是鱼,好了,我以图解的 ...

  8. Java "==和equals区别"

    本文转载至中软国际电子政务部Jeff Chi总结,转载请说明出处. 概述:        A.==可用于基本类型和引用类型:当用于基本类型时候,是比较值是否相同:当用于引用类型的时候,是比较对象是否相 ...

  9. [LeetCode]题解（python）：095-Unique Binary Search Trees II

    题目来源: https://leetcode.com/problems/unique-binary-search-trees-ii/ 题意分析: 给一个整数,返回所有中序遍历是1到n的树. 题目思路: ...

  10. React使用笔记1-React的JSX和Style

    React使用笔记1-React的JSX和Style Date: 2015-11-27 20:56 Category: Web Tags: JavaScript Author: 刘理想 [toc] 1 ...