<!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. CentOS下安装gdb的方法

    https://blog.csdn.net/zlk252620068/article/details/79564944

  2. 【串线篇】Mybatis缓存之二级缓存

    1.应用 二级缓存:namespace级别的缓存:SqlSession关闭或者提交以后有效 一级缓存:SqlSession关闭或者提交以后,一级缓存的数据会放在二级缓存中: 二级缓存的使用:mybat ...

  3. 环境变量，env, set

    separate: win(;), linux(:) liunx 写 export PYTHONPATH=.:./lib:./libraryexport http_proxy=http://proxy ...

  4. UITextfield 允许和禁止编辑

    1.enabled属性 2.resignFirstResponder,设置的时候,如果不起作用,可以延时一会儿,因为键盘升起需要时间. dispatch_after(dispatch_time(DIS ...

  5. 4412 chmod权限

    chmod权限 使用命令"man 2 chmod"学习chmod函数• int chmod(const char *path, mode_t mode);– 参数*path:文件路 ...

  6. Review: 9-13 July

    9 July 并查集 int fa[]; for (int i=1; i<=n; ++i) fa[i]=i; int f(int x){return fa[x]==x?x:fa[x]=f(fa[ ...

  7. [CSP-S模拟测试]:阴阳（容斥+计数+递推）

    题目传送门(内部题16) 输入格式 第一行两个整数$n$和$m$,代表网格的大小.接下来$n$行每行一个长度为$m$的字符串,每个字符若为$W$代表这个格子必须为阳,若为$B$代表必须为阴,若为$?$ ...

  8. sql server中实现mysql的find_in_set函数和group_concat类似功能的讲解

    charindex(','   +  ' test '+  ','   ,   ',' + test2+ ',')>0 灵活运用 SQL SERVER FOR XML PATH FOR XML ...

  9. Oralce常用系统函数

    dual:Oracle系统内部提供的一个用于实现临时数据计算的特殊表,它只有一个列DUMMY (VARCHAR2(1)) 字符类函数: concat--连接字符串 initcap--每个单词首字母大写 ...

  10. 用 Flask 来写个轻博客 (27) — 使用 Flask-Cache 实现网页缓存加速

    目录 目录 前文列表 扩展阅读 Flask-Cache 应用 Flask-Cache 实现视图函数缓存 缓存无参数的普通函数 缓存带参数的普通函数 缓存无动态参数的视图函数 缓存带动态参数的视图函数 ...