<!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. Ubunton

    Ubunton 装完机后 root账户进不去 没密码 在自己账号下 sudo passwd 输入两次密码就是root的密码 之后就可以su root 密码进入了 外部客户端sftp方式连接: sudo ...

  2. github ssh秘钥配置

    1.本地生产ssh密钥对 ssh-keygen -t rsa -C "your_email@example.com" 2. 进入~/.ssh 拷贝公钥进入github里面

  3. visual studio 中gitflow使用

    vs中已集成了git,但是如果想使用gitflow,要去扩展包里面下载 装完后,在右侧面板的"团队资源管理"就会出现gitflow 进行git flow实始化 后就可以进行 各分支 ...

  4. SecureCRT 多窗口 批量操作Linux

    1.打开多个窗口 2.Window --> Tile Verically将窗口并列展开 3.右击空白部分选择弹出下方的命令窗口 4.右击命令行窗口,选择发送命令至所有窗口 5.完成

  5. dubbo-go 的开发、设计与功能介绍

    dubbo-go 的前世今生 dubbo-go 是目前 Dubbo 多语言生态最火热的项目.dubbo-go 最早的版本应该要追溯到 2016 年,由社区于雨同学编写 dubbo-go 的初版.当时很 ...

  6. spring-boot整合shiro实现权限管理

    1.运行环境 开发工具:intellij idea JDK版本:1.8 项目管理工具:Maven 4.0.0 2.GITHUB地址 https://github.com/nbfujx/springBo ...

  7. 10.2-linux文件与目录管理

    1.1-目录的相关操作 . rm Remove (unlink) the FILE(s). -f, --force #强制删除 ignore nonexistent files, never prom ...

  8. PHP连接FTP服务的简单实现

    PHP连接FTP服务: <?php class Ftp { private $connect; private $getback; /** * ftp连接信息 * @var array */ p ...

  9. Linux随笔 - Linux统计某文件夹下文件、文件夹的个数

    统计某文件夹下文件的个数 ls -l |grep "^-"|wc -l 统计某文件夹下目录的个数 ls -l |grep "^d"|wc -l 统计文件夹下文件 ...

  10. UITableView 支持左右滑动(二)

    原理: 用tableView其中一个cell 来展示一个 UIScrollView, 在scrollview上很像放置子tableView 注意点: 外层tableView需要实现手势代理 /* 若重 ...