<!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. Vue 左右翻页，点赞动画

    因做小活动比较多,使用了一些动画,做些笔记,供大家参考 翻页动画 router -> index.js import Vue from 'vue'; import Router from 'vu ...

  2. 机器学习：1.K近邻算法

    1.简单案例:预测男女,根据身高,体重,鞋码 import numpy as np import matplotlib import sklearn from skleran.neighbors im ...

  3. find命令进阶（三）：xargs

    The xargs command performs an interesting function. It accepts input from standard input and convert ...

  4. phpLite 压缩包 百度云网盘资源

    链接: https://pan.baidu.com/s/1b6EnClYOznWa0OFgk4aNQg 密码: gpup

  5. UiAutomator、UiAutomator2、Bootstrap的关系

    很多同学经过一段时间的学习之后都明白了Appium的基本原理,但是越学习到后面发现出现的很多陌生名词无法弄清楚其具体作用,今天这篇文章的目的就是为了让大家来弄懂三个高频名词:UiAutomator.U ...

  6. android智能手机如何查看APK包名

    工具/原料   智能手机一部 USB线一根 方法/步骤   1 首先.使用USB线,将电脑和手机连起来.注意.手机的USB调试默认需要打开,如下图所示. 2 然后启动电脑端的cmd应用,进入dos界面 ...

  7. 【bzoj1185】[HNOI2007]最小矩形覆盖 (旋转卡壳)

    给你一些点,让你用最小的矩形覆盖这些点 首先有一个结论,矩形的一条边一定在凸包上!!! 枚举凸包上的边 用旋转卡壳在凸包上找矩形另外三点... 注意精度问题 #include<cstdio> ...

  8. 富文本框编辑器实现：a、支持图片复制粘贴；b、支持word复制粘贴图文。

    Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧?Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能.但是无法 ...

  9. 早日选择一门自己喜欢的，然后瞄准目标，不达目的誓不罢休。像文章的作者一样成为一名成功的IT人士。

    hawk的奋斗历程. 来自:LinuxForum  :http://www3.linuxforum.net/ 原址:http://www.linuxforum.net/forum/gshowflat. ...

  10. （转载）解决vmware上安装ubuntu不能联网的问题

    在vmware中安装Ubuntu之后,我们希望基本的功能如上网.传输文件等功能都是可用的,但是经常遇到不能上网的情况.使用笔记本时,我们经常希望能通过无线网卡上网,但是在做嵌入式开发时,我们还希望虚拟 ...