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. jQ中prop与attr的区别

    1.prop适用于HTML元素本身就带有的固有属性 2.attr适用于HTML元素我们自定义的属性 <input type="checkbox" value="复选 ...

  2. 阿里云服务器linux(centos)常用命令

    系统信息 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 - (SMBIOS ...

  3. Linux系统管理员：不要害怕升级内核

    Linux系统管理员平时很重要的一项工作就是负责系统内核升级.做好系统内核的升级工作,对于Linux系 统的稳定性具有至关重要的作用.但是很少有人敢贸然的对Linux系统的内核进行升级,担心会影响现有 ...

  4. Qt双缓冲机制：实现一个简单的绘图工具（纯代码实现）

    http://blog.csdn.net/rl529014/article/details/51658350

  5. Linux中的IO复用接口简介（文件监视？）

    I/O复用是Linux中的I/O模型之一.所谓I/O复用,指的是进程预先告诉内核,使得内核一旦发现进程指定的一个或多个I/O条件就绪,就通知进程进行处理,从而不会在单个I/O上导致阻塞. 在Linux ...

  6. ubuntu-12.04.4-server安装

    一.系统ISO下载      下载地址:http://www.ubuntu.com/download       根据自己的需求下载,我的电脑配置一般,因此选择32位的.   二.虚拟机配置      ...

  7. 利用宏定义令iOS项目当中的NSLog不执行

    今天在博客园主页看到一篇帖子,提到NSLog消耗运行时性能: http://www.cnblogs.com/sunnyxx/p/3680623.html 解决方案如下,在​Prefix.pch文件当中 ...

  8. SSD磁盘，CPU居高不下,高并发的情况下,是不是mysql解析器耗费的cpu资源高?

    你看看我做的实验,这个user表是300多W纪录,普通磁盘下,消耗时间最多的是Copy to tmp table 0.81秒,当然在ssd下,这个可以减少很多很多的,第二高就是sending data ...

  9. paip. everything exe 文件不能启动的解决

    paip.   everything  exe  文件不能启动的解决 作者Attilax ,  EMAIL:1466519819@qq.com  来源:attilax的专栏 地址:http://blo ...

  10. HTML静态网页（css样式表）

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/    此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控 ...