Html
    Css
    Js
/* 下拉按钮样式 */
.dropbtn {
	background-color:#4CAF50;
	color:white;
	padding:16px;
	font-size:16px;
	border:none;
	cursor:pointer;
	border-radius:3px;
}
.dropbtn::after {
	content:" ";
	width:0;
	height:0;
	display:inline-block;
	border:6px solid  white;
	margin-left:3px;
	vertical-align:middle;
	border-top-width:12px;
	border-bottom-width:0;
	border-left-color:transparent;
	border-right-color:transparent;
}

.dropdown {
	position:relative;
	display:inline-block;
}
/* 下拉内容 (默认隐藏) */
.dropdown-content {
	display:none;
	position:absolute;
	background-color:#f9f9f9;
	min-width:160px;
	box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* 下拉菜单的链接 */
.dropdown-content a {
	color:black;
	padding:12px 16px;
	text-decoration:none;
	display:block;
}
/* 鼠标移上去后修改下拉菜单链接颜色 */
.dropdown-content a:hover {
	background-color:#f1f1f1;
	box-shadow:0 0 2px #eee;
}
/* 在鼠标移上去后显示下拉菜单 */
.dropdown:hover .dropdown-content {
	display:block;
}
/* 当下拉内容显示后修改下拉按钮的背景颜色 */
.dropdown:hover .dropbtn {
	background-color:#3e8e41;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.10.2
 立即下载

简单的下拉菜单

纯html 和css 写一个简单的下拉菜单(附加一个小向下箭头的css写法) 供大家赏玩

0