jquery实现最简单的下拉菜单
2024-08-28 22:16:23
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
.menu {
width: 120px;
background-color: #CCC;
position: relative;
height: 26px;
}
.menu .sub {
position: absolute;
display:none;
left: 0px;
top: 26px;
background-color: #9CF;
width: 100%;
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script>
$(function(){
$('.menu').mouseover(function(e){
$(this).find('.sub').toggle();
});
$('.menu').mouseout(function(e){
$(this).find('.sub').toggle();
});
});
</script>
</head> <body>
<div class="menu">
<span>按钮</span>
<dl class="sub">
<dd><a href="">选项1</a></dd>
<dd><a href="">选项2</a></dd>
<dd><a href="">选项3</a></dd>
</dl>
</div>
</body>
</html>
最新文章
- android Dialog实例
- JavaOO面向对象中的注意点（二）
- 微信web开发者工具
- Markdown: 用写代码的思维写文档
- .NET Core、DNX、DNU、DNVM、MVC6学习资料
- js中apply方法的使用
- 从数据包谈如何封杀P2SP类软件
- 版本控制、SVN、VSS
- 第三方框架之SDWebImage
- C++类继承中的构造函数和析构函数 调用顺序
- ExtJs4得知（五岁以下儿童）主要的Ext分类
- 在转换为 UTC 时大于 DateTime.MaxValue 或小于 DateTime.MinValue 的 DateTime 值无法系列化为 JSON
- 算法——蛮力法之选择排序和冒泡排序c++实现
- Azure Powershell对ASM资源的基本操作
- Ubuntu中的出现:主文件夹的内容跑在桌面显示解决方案。同时 vim编辑器的操作
- Hive基本命令解析
- 高性能IO之Reactor模式
- JS自学总结的零散知识点
- AVL树与红黑树（R-B树）的区别与联系
- sqlserver查看和解除表死锁