<header class="header">
	<div class="header__inner">
		<h1 class="header__title">ダミー株式会社</h1>
		<nav class="header__menu main-nav">
			<ul class="main-nav__list">
				<li class="main-nav__item">
					<a href="#" class="main-nav__link">トップ</a>
				</li>
				<li class="main-nav__item main-nav__item_has-children">
					<a href="#" class="main-nav__link">サービス</a>
					<ul class="main-nav__child child-nav">
						<li class="child-nav__item">
							<a href="#" class="child-nav__link">ホームページ制作</a>
						</li>
						<li class="child-nav__item">
							<a href="#" class="child-nav__link">サーバー管理</a>
						</li>
					</ul>
				</li>
				<li class="main-nav__item">
					<a href="#" class="main-nav__link">会社概要</a>
				</li>
				<li class="main-nav__item">
					<a href="#" class="main-nav__link">お問い合わせ</a>
				</li>
			</ul>
		</nav>
	</div>
</header>
<script src="https://unpkg.com/focus-within-polyfill"></script>

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Noto Sans JP", sans-serif;
}

.header {
	padding: 16px 0 0;
}

.header__title {
	text-align: center;
}

.header__menu {
	margin-top: 16px;
}

.main-nav {
	background: #d6d6d6;
}

.main-nav__list {
	width: 90%;
	margin: 0 auto;
	display: flex;
	list-style: none;
	justify-content: center;
}

.main-nav__item {
	width: 25%;
}

.main-nav__item:not(:last-child) {
	border-right: 1px solid #fff;
}

.main-nav__item_has-children {
	position: relative;
}

.main-nav__item_has-children:after {
	content: "";
	width: 8px;
	height: 8px;
	position: absolute;
	bottom: 8px;
	transform: rotate(45deg) translateX(-50%);
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
	left: 50%;
}

.main-nav__item_has-children:hover .child-nav,
.main-nav__item_has-children:focus-within .child-nav,
.main-nav__item_has-children.focus-within .child-nav {
	display: block;
}

.main-nav__link {
	color: #000;
	text-decoration: none;
	display: block;
	padding: 24px 16px;
	box-sizing: border-box;
	text-align: center;
}

.main-nav__link:hover,
.main-nav__link:focus {
	background: #c6c6c6;
}

.child-nav {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	list-style: none;
	background: #d6d6d6;
	padding: 16px;
	text-align: center;
}

.child-nav__item:not(:first-child) {
	margin-top: 16px;
}

.child-nav__link {
	color: #000;
	text-decoration: none;
}