【CSS】クリック領域を広げたナビゲーションボタンを作る

<nav>
	<ul>
		<li><a href="#">ホーム</a></li>
		<li><a href="#">当社について</a></li>
		<li><a href="#">アクセス</a></li>
		<li><a href="#">お問い合わせ</a></li>
	</ul>
</nav>

.content-nav ul{
	display: flex;
}

.content-nav li{
	margin-right:1px;
}
.content-nav li:last-child{
	margin-right:0;
}
 
.content-nav li a{
	padding:10px;
	background-color:#ffcccc;
}

.content-nav li{
	margin-right:1px;
}
.content-nav li:last-child{
	margin-right:0;
}
 
.content-nav li a{
	display:block;
	padding:10px;
	background-color:#ffcccc;
}

.content-nav li{
	margin-right:1px;
	width:100%;
	text-align: center;
}
.content-nav li:last-child{
	margin-right:0;
}
 
.content-nav li a{
	display:block;
	padding:10px;
	background-color:#ffcccc;
}

.content-nav li{
	margin-right:1px;
	width:100%;
	text-align: center;
}
.content-nav li:last-child{
	margin-right:0;
}
 
.content-nav li a{
	display:block;
	padding:10px;
	background-color:#ffcccc;
}
 
.content-nav li a:hover{
	color:#fff;
	background-color:#ff6666;
}