<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>p{
color: red;
font-weight:900;
font-size: 14px;
text-align:center;
padding: 20px;
}
ul{
list-style: none; /* li要素のリストマーク（・）を消す */
padding-left: 5px;
}
/* mnav */
.mnav {
width: 80%;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
text-align: center;
}
.mnav li {
padding:0 15px;
flex-basis: 20%;
max-width: 20%;
color: #110C53;
transform: skewX(150deg);
border-right: 1px solid #ced1d4;
}
.mnav li span {
display: block;
transform: skewX(-150deg);
}
.mnav li a {
display: block;
width: 100%;
padding:10px 0;
color: #110C53;
text-decoration: none;
}
.mnav li::after {
content: "";
width: 1px;
height:30px;
display: block;
position: absolute;
top: 50%;
right: 0;
-webkit-transform: translateY(-50%) skewX(150deg);
transform: translateY(-50%) skewX(150deg);
/*background: #ced1d4;*/
}
.mnav li:hover,.mnav li.active {
background-color: #5c9ee6;
}
.mnav li:hover a,.mnav li.active a {
color: #fff;
}</style>
</head>
<body>
<p>イラついてクリックし過ぎに注意</p>
<nav>
<ul class="mnav">
<li class="active">
<span>
<a href="＃">二階</a>
</span>
</li>
<li>
<span>
<a href="＃">菅</a>
</span>
</li>
<li>
<span>
<a href="＃">麻生</a>
</span>
</li>
<li>
<span>
<a href="＃">安倍</a>
</span>
</li>
</ul>
</nav>
<script>
</script>
</body>
</html>