代码部分：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery实现最简单的下拉菜单</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%;
}
.menu .sub a {
text-decoration: none;
color: #0c80d7;
}
</style>
<script src="jquery-3.1.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>
效果图：
下拉菜单.png