前端html+css开发：简单下拉菜单（附源码）

效果图：

css代码：

			.downorder {
				width: 100px;
				height: auto;
				position: relative;
			}
			.downorder:hover a{
				display: block;/*鼠标移入菜单显示a标签内容*/
			}
			.order {
				position: relative;
				text-align: center;
				display: inline-block;
				font-size: 16px;
				padding: 15px;
				background-color: dodgerblue;

			}
			.order:hover {
				background-color: aqua;
				color: #FFFF00;
			}
			.downtext {
				position: relative;
				text-align: center;
				display: inline-block;
				font-size: 16px;
				background-color: #7FFF00;
			}
			.downtext a {
			    display: none;/*隐藏a标签内容*/
			    text-decoration: none;
			    color: red;
			    padding: 15px;
			}
			.downtext a:hover {
				background-color: aqua;
				color: #FFFF00;
			}

html代码：

		
			
				下拉菜单
			
			
				内容1
				内容2
				内容3
				内容4