jquery实现最简单的下拉菜单

本文转载自查看原文 2017-12-02 19:17 8309 jquery

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

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 jquery实现下拉菜单 jquery实现多级下拉菜单基于jQuery的下拉菜单菜单【02】，诸位上眼！！！基于jQuery的下拉菜单插件，诸位上眼！！！ jQuery点击下拉菜单的展示与隐藏 checkbox及css实现点击下拉菜单 js 实现级联下拉菜单 jQuery实现一个淡入淡出下拉菜单非常简易利用Jquery实现滑动出现下拉菜单和箭头转向 HTML+CSS简单实现导航栏二级下拉菜单