前端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代碼：

<div class="downorder">
			<button class="order">
				下拉菜單
			</button>
			<div class="downtext">
				<a href="javascript:;" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >内容1</a>
				<a href="javascript:;" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >内容2</a>
				<a href="javascript:;" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >内容3</a>
				<a href="javascript:;" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >内容4</a>
			</div>
		</div>