©TCP-tryWWW

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>CSS Dropdowns</title>
	<style>
		.dropdown {
			position: relative;
			display: inline-block;
		}
		.dropdown-content {
			display: none;
			position: absolute;
			background-color: #F9F9F9;
			min-width: 160px;
			padding: 8px;
			box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		}
		.dropdown:hover .dropdown-content { display: block; }
	</style>
</head>

<body>

	<h1>드롭다운 효과</h1>
	<div class="dropdown">
		<span>여기에 마우스를 올려보세요!</span>
		<div class="dropdown-content">
			<p>마우스를 올려야 나타나는 div 요소입니다!</p>
		</div>
	</div>

</body>

</html>