snippet.html
<!DOCTYPE html>
<head>
<title>下拉菜单实例</title>
<meta charset="utf-8">
<style>
.ff_dm_btn {
	background-color:#4CAF50;
	color:#FFFFFF;
	font-size:13px;
	border:none;
	cursor:pointer;
	width:24px;
	height:24px;
	border-radius:3px;
}
 
.ff_dm_div:hover .ff_dm_btn {
	background-color:#3E8E41;
}
 
.ff_dm_div {
	position:relative;
	display:inline-block;
}
 
.ff_dm_content {
	display:none;
	position:absolute;
	background-color:#f9f9f9;
	min-width:200px;
	border-width:1px;
	border-color:#E5E5E5;
	border-style:solid;
	box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
}
 
.ff_dm_content a {
	color:#000000;
	padding:6px 12px;
	font-size:15px;
	text-decoration:none;
	display:block;
	white-space:nowrap;
}
 
.ff_dm_content a:hover {
	background-color:#4281F4;
	color:#FFFFFF;
}
 
.ff_dm_div:hover .ff_dm_content {
	display:block;
}
 
.ff_dm_content hr {
	height:1px;
	width:99%;
	border:none;border-top:1px solid #AAAAAA;
}
</style>
</head>
<body>
 
<div class="ff_dm_div">
<button class="ff_dm_btn">+</button>
<div class="ff_dm_content">
<a href="http://www.200yi.com">菜单1</a>
<a href="http://www.200yi.com">200yi.com 1</a>
<a href="http://www.200yi.com">200yi.com 2</a>
<hr>
<a href="http://www.200yi.com">200yi.com 3</a>
<a href="http://www.200yi.com">菜单2</a>
</div>
</div>
</body>
</html>