[셸위:게임 친구 매칭 사이트] 드롭다운 메뉴 구현

[셸위:게임 친구 매칭 사이트] 드롭다운 메뉴 구현

 

 

1. html 코드

<div class="nav-bar">
		<div class="menus">
			<div class="menu-container">
				<a href="#" class="menu">친구 찾기</a>
				<ul class="drop-down-menus-game">
					<li>
						<div class="recommended-user">
							<button class="btn-circle"><img src="../static/images/anonymus.png"></button>
							<div>롤</div>
						</div>
					</li>
					<li>
						<div class="recommended-user">
							<button class="btn-circle"><img src="../static/images/anonymus.png"></button>
							<div>배그</div>
						</div>
					</li>
				</ul>
			</div>
			<div class="menu-container">
				<a href="" class="menu">게임 강의</a>
				<ul class="drop-down-menus-game">
					<li>
						<div class="recommended-user">
							<button class="btn-circle"><img src="../static/images/anonymus.png"></button>
							<div>롤</div>
						</div>
					</li>
					<li>
						<div class="recommended-user">
							<button class="btn-circle"><img src="../static/images/anonymus.png"></button>
							<div>배그</div>
						</div>
					</li>
				</ul>
			</div>
			<div class="menu-container">
				<a href="" class="menu">커뮤니티</a>
				<ul class="drop-down-menus-game">
					<li>
						<div class="recommended-user">
							<button class="btn-circle"><img src="../static/images/anonymus.png"></button>
							<div>롤</div>
						</div>
					</li>
					<li>
						<div class="recommended-user">
							<button class="btn-circle"><img src="../static/images/anonymus.png"></button>
							<div>배그</div>
						</div>
					</li>
				</ul>
			</div>
			<p>|</p>
			<div class="menu-container">
				<a href="" class="menu">뉴스</a>
				<ul class="drop-down-menus">
					<li><h4>공지사항</h4></li>
					<li><h4>이벤트</h4></li>
				</ul>
			</div>
			<div class="menu-container">
				<a href="" class="menu">고객 지원</a>
				<ul class="drop-down-menus">
					<li><h4>Q&A</h4></li>
				</ul>
			</div>
			<div class="menu-container">
				<a href="" class="menu">콘텐츠</a>
				<ul class="drop-down-menus">
					<li><h4>게임 성향 테스트</h4></li>
					<li><h4>게임 이상형 월드컵</h4></li>
					<li><h4>게임 챌린지</h4></li>
				</ul>
			</div>	
			<div class="menu-container">
				<a href="" class="menu">회원 정보</a>
			</div>	
		</div>
		
	</div>

 

2. css 코드

	.menus{
		height:80px;
		width:60%;
		display:flex;
		justify-content: space-around;
		align-items: center;
	}
	.menu{
		color: white;
		text-decoration: none;
		font-size: 20px;
		border: none;
  		cursor: pointer;
	}
	.menu:hover {
  		box-shadow: 0px 10px 8px 0px rgba(0, 0, 0, 0.3);
		background-color: white;
		color: #FD6F22;;
	}
	.drop-down-menus-game{
		position: absolute;
		display: none;
		flex-direction: row;
 		width: 30%;
 		height: 30%;
 		padding: 30px;
  		background-color: #666;
  		border-radius:15px;
		box-shadow: 0px 8px 6px -6px #666;
  		z-index: 98;
  		padding: 10px;
	}
	.drop-down-menus{
		position: absolute;
		display: none;
		text-align: center;
		padding-top:5px;
		padding-bottom:5px;
		flex-direction: row;
 		width: 10%;
 		padding: 30px;
  		background-color: #FD6F22;
  		border-radius:15px;
		box-shadow: 0px 8px 6px -6px #666;
		color: white;
  		z-index: 98;
  		padding: 10px;
	}
	.menu-container:hover .drop-down-menus-game{
		display: block;
	}
	.drop-down-menus-game:hover .drop-down-menus-game{
		display: block;
	}
	.menu-container:hover .drop-down-menus{
		display: block;
	}
	.drop-down-menus:hover .drop-down-menus{
		display: block;
	}