JSFiddle - React, Tailwind, and code Playground

by echocarriet

HTML

<body>
	<div class="wrap">
		<div class="header clearfix">
			<ul class="menu">
				<li><a href="#">首頁</a></li>
				<li><a href="#">產品專區</a></li>
				<li>
					<a class="dropdown" href="#">訂單查詢</a>
					<ul class="dropdown-open">
						<li><a href="#">出貨進度</a></li>
						<li><a href="#">退貨申請</a></li>
						<li><a href="#">退換申請</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
</body>

CSS

.wrap{
	width: 500px;
	margin:0 auto;
}

.clearfix:after{
	content:"";
	display:table;
	clear:both;
}
.header{
	background: #f4f0e6;
	height: 100px;
}
.menu{
	float: right;
}
.menu > li{
	float: left;
	width: 100px;
}
.menu a{
	display: block;
	text-align: center;
	text-decoration:none;
	background: #fff;
	color:#525252;
	border:1px solid #525252;
	padding:.5em 0;
	transition: all .3s;
}
.menu a:hover, .menu a.active{
	color: #fff;
	background:#525252;
}/*加.menu a.active 按下訂單查詢顯示下方選項列後，依然呈現黑底白字*/
.dropdown-open{
	display: none;
}/*讓一開始的環境訂單查詢下方選單列是收起的狀態*/

JavaScript

$(document).ready(function() {
	$('.dropdown').click(function(event) {
		event.preventDefault();
		$('.dropdown').toggleClass('active');
		$('.dropdown-open').fadeToggle();
	});
});
/*加.menu a.active 按下訂單查詢顯示下方選項列後，依然呈現css設定的黑底白字，再於js運行它$('.dropdown').toggleClass('active');*/