<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<style type="text/css">
#mymenu {
height: 30px;
width: 300px;
}
#mymenu ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}

#mymenu ul li {
float: left;
width: 100px;
line-height: 30px;
text-align: center;
background-color: #3CC;
}
#mymenu ul li ul li {
background-color:#3CF;
}

#mymenu ul li ul{display: none}
</style>
<script src="jquery-1.7.js" type="text/javascript">
</script>
<script language="javascript">

$(function(){
//$("#mymenu ul li ul").css("display","none");

// $("#mymenu ul li").mouseover(function(){
// $(this).next("ul").slideDown(300); //建议用next不用children，因为后者是集合
// }
//);

//$("#mymenu ul li").mouseout(function(){
// $(this).next("ul").slideUp(300);
// }
// );
$("#mymenu ul li").hover(function(){

$(this).children("ul").slideDown(300);
//alert("你好")

},function(){

$(this).children("ul").slideUp(300);
});

});

</script>
</head>

<body>
<div id="mymenu">

<ul>
<li>菜单1

<ul>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>

</li>
<li>菜单1</li>
<li>菜单1

<ul>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>

</li>
</ul>

</div>
</body>
</html>

小白jquery横向菜单弹出菜单制作的更多相关文章

  1. JQuery弹出菜单时禁止页面（body）滚动

    最近在做手机端的弹出菜单,但是菜单弹出来后滑动手机屏幕的话页面滚动总是会将菜单滑上去,体验非常不好,所以查了一下弹出菜单时禁止页面滚动的方法,整理如下: 方法一:弹出菜单时给body和html添加一个 ...

  2. DIV+CSS制作二级横向弹出菜单，略简单

    没有使用JavaScript控制二级菜单的显示,结果如上图所示. 代码如下: <!DOCTYPE html> <html> <head> <meta char ...

  3. 向上弹出菜单jQuery插件

    插件名:柯乐义英文名:Keleyijs文件名称:jquery.keleyi.js插件功能:该插件可以让你轻易地在页面上构建一个向上弹出的二级菜单. 示例查看:http://keleyi.com/kel ...

  4. 纯div+css制作的弹出菜单

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

  5. html5手机端遮罩弹出菜单代码

    效果体验:http://hovertree.com/texiao/html5/17/ 效果图: 代码如下: <!doctype html> <html lang="zh&q ...

  6. html + js 右 点击 弹出 菜单

    页面 引用jar 包 <link rel="stylesheet" href="../../style/zui.min.css" type="t ...

  7. web标准(复习)--4 纵向导航菜单及二级弹出菜单

    今天我们开始学习纵向导航菜单及二级弹出菜单,包含以下内容和知识点: 纵向列表 标签的默认样式 css派生选择器 css选择器的分组 纵向二级列表 相对定位和绝对定位 一.纵向列表纵向列表或称为纵向导航 ...

  8. css+html+js实现多级下拉和弹出菜单

    本文将使用css+html+js实现横向菜单.具有多级弹出菜单下拉. 首先我们来看看效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvajkwMzgy ...

  9. vc++ 如何添加右键弹出菜单

    一.创建新工程 二.编辑菜单资源 1.添加菜单 按"Ctrl+R",双击"Menu"图标 2.于菜单编辑器内编辑菜单 四.添加代码(红色部分) void CCM ...

随机推荐

  1. AGC003[BCDEF]题解

    2018-12-28 有点累EF明天再写叭=v= 2018-12-29 update EF B - Simplified mahjong 可以注意到 一段连续的非0序列都可以凑出 就是显然%2=0的可 ...

  2. Hibernate入门核心配置文件和orm元数据配置文件详解

    框架是什么? 框架是用来提高开发效率的 封装了一些功能,我们需要使用这些功能时,调用即可,不用手动实现 所以框架可以理解为一个半成品的项目,只要懂得如何使用这些功能即可 Hibernate是完全面向对 ...

  3. notepad++ 安装 hex_editor 十六进制查看插件

    1.到 https://github.com/chcg/NPP_HexEdit/releases 去下载相应的文件,注意32位和64位的区别 2.点击notepad++的设置--->导入--&g ...

  4. 英语单词retrieve

    retrieve 来源——报错信息 [root@centos65 ~]# yum whatprovides */lsb_release Loaded plugins: fastestmirror, s ...

  5. HttpClient之HttpContext使用

    Multiple request sequences that represent a logically related session should be executed with the sa ...

  6. POJ 3525 Most Distant Point from the Sea (半平面交)

    Description The main land of Japan called Honshu is an island surrounded by the sea. In such an isla ...

  7. HDU - 6601 Keen On Everything But Triangle 主席树

    Keen On Everything But Triangle 感觉最近多校好多主席树的亚子,但是本人菜得很,还没学过主席树,看着队友写题就只能划水,\(WA\)了还不能帮忙\(debug\),所以深 ...

  8. A Bug's Life - poj2492

    Time Limit:5000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Status Descr ...

  9. 安装和使用Redis【转】

    Redis是一个高性能的内存数据库,它体积轻巧性能又高,在企业中被广泛使用. 安装Redis Windows安装 Redis是为Linux系统设计的,但是也有团队为Windows做了移植.我们可以到这 ...

  10. django manager

    django manager 在语句Book.objects.all()中,objects是一个特殊的属性,需要通过它查询数据库. 总之,模块manager是一个对象,Django模块通过它进行数据库 ...