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. git配置ssh

    $ git config --global user.name "yourname"$ git config --global user.email "youremail ...

  2. JAVA并发，CyclicBarrier

    CyclicBarrier 翻译过来叫循环栅栏.循环障碍什么的(还是有点别扭的.所以还是别翻译了,只可意会不可言传啊).它主要的方法就是一个:await().await() 方法没被调用一次,计数便会 ...

  3. 一維條碼 EAN13 的編碼方式

    何謂 EAN-13碼 ? ▲ 國家代號(3位數) 中華民國的國家代號為471. ▲ 廠商代號(6位數) 由本會核發給廠商6位數的廠商代號. ▲ 商品代號(3位數) 由廠商自行編定,按一物一號的原則,不 ...

  4. C#中隐式操作CMD命令行窗口

    原文:C#中隐式操作CMD命令行窗口 MS的CMD命令行是一种重要的操作界面,一些在C#中不那么方便完成的功能,在CMD中几个简单的命令或许就可以轻松搞定,如果能在C#中能完成CMD窗口的功能,那一定 ...

  5. Android 三大图片缓存原理、特性对比

    这是我在 MDCC 上分享的内容(略微改动),也是源码解析第一期发布时介绍的源码解析后续会慢慢做的事. 从总体设计和原理上对几个图片缓存进行对比,没用到他们的朋友也可以了解他们在某些特性上的实现. 上 ...

  6. openstack中iptables的使用

    openstack中nova使用了iptables实现其网络相关功能,乍看openstack的iptables表比较复杂,整理了一下iptables的filter表和nat表的结构,以一个all in ...

  7. 30天自制操作系统第八天学习笔记（u盘软盘双启动版本）

    暑假学习小日本的那本书:30天自制操作系统 qq交流群:122358078    ,更多学习中的问题.资料,群里分享 environment:开发环境:ubuntu 第八天的学习思考: 关于鼠标是怎么 ...

  8. 说一说Servlet 的生命周期

    答:servlet 有良好的生存期的定义, 包括加载和实例化. 初始化. 处理请求以及服务结束.这个生存期由 javax.servlet.Servlet 接口的 init,service 和 dest ...

  9. Hibernate 总结一

    Session 当批量处理数据过大时,session这个集合会造成内存溢出,需要通过flush把session中的数据刷出到数据库中,让后再clear,清空缓存 一.集合映射. 类型 Java中声明 ...

  10. C++对象模型4--有重写的单继承

    有重写的单继承 派生类中重写了基类的print()函数. //Derived_Overwrite.h #pragma once #include "base.h" class De ...