<!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. Flutter-RaisedButton

    RaisedButton({ Key key, //点击按钮的回调出发事件 @required VoidCallback onPressed, //水波纹高亮变化回调 ValueChanged< ...

  2. BZOJ4671 异或图 斯特林反演+线性基

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=4671 题解 半年前刚学计数的时候对这道题怀着深深的景仰,现在终于可以来做这道题了. 类似于一般 ...

  3. Java实现线程的两种方式?Thread类实现了Runnable接口吗?

    Thread类实现了Runnable接口吗? 我们看看源码中对与Thread类的部分声明 public class Thread implements Runnable { /* Make sure ...

  4. 谷歌SEO和百度SEO的区别

    远程桌面连接 一直有一个现象:关于谷歌优化或只是以谷歌为例谈SEO观点或技术时,经常有读者说,不适用于百度,希望多看到关于百度​​SEO的帖子上一篇利用规范的标签在谷歌排名中陷害竞争对手的帖子,就有好 ...

  5. [LightOJ1070]Algebraic Problem

    题目:Algebraic Problem 链接:https://vjudge.net/problem/LightOJ-1070 分析: 1)$ a^n+b^n = ( a^{n-1}+b^{n-1} ...

  6. mysql查看sql执行情况的几种方法

    mysql系统变量分为全局变量和会话变量,全局变量的修改影响到整个服务器,会话变量修改只影响当前的会话. 查看log日志是否开启 show variables like 'general_log' s ...

  7. 【python3】装饰器

    参考文章: 理解Python装饰器(Decorator) 关键点: 写装饰器一定要搞定楚函数名后面带小括号和不带小括号的含义.带小括号,表示调用这个函数,而不带小括号,则表示的是该函数引用地址 简单装 ...

  8. 对GridFS数据进行分片

    On this page files 集合 chunks 集合 在对 GridFS 存储进行分片时,需要注意以下的情况: files 集合 大多数情况下不需要对 files 集合进行分片,这个集合通常 ...

  9. Java + selenium 元素定位(1)之By id/Name/ClassName

    这篇文章开始,要介绍web自动化核心的内容,也是最困难的部分了,就是定位元素,并去对元素进行操作.想要对元素进行操作,第一步,也是最重要的一步,就是要找到这个元素,如果连元素都定位不到,后续什么操作都 ...

  10. SSH远程免密码的密钥登录服务(Linux,Linux)

    本次实验基于两台Linux虚拟机之间的实验,一台做服务器,一台做客户机,模拟免密码的密钥登录. 首先两台虚拟机需要可以ping通,用客户机访问服务器. sshd服务主配置文件路径: /etc/ssh/ ...