<!--menuその1-->
<div class="menu1 clearfix">
  <a href="#">TOP</a>
  <a href="#">ABOUT</a>
  <a href="#">ACCESS</a>
  <a href="#">SMASH</a>
</div>
<hr /><!--メニュー例区切り-->
<!--menuその2-->
<div class="menu2 clearfix">
  <a href="#">TOP</a>
  <a href="#">ABOUT</a>
  <a href="#">ACCESS</a>
  <a href="#">SMASH</a>
</div>
<hr /><!--メニュー例区切り-->
<!--menuその3-->
<div class="menu3 clearfix">
  <div class="menu-left clearfix">
    <a href="#">TOP</a>
    <a href="#">ABOUT</a>
    <a href="#">ACCESS</a>
    <a href="#">SMASH</a>
  </div>
  <div class="menu-right">
    <a href="#">SIGN UP</a>
  </div>
</div>
<hr /><!--メニュー例区切り-->
/*各メニュー共通*/
div{
  margin:30px auto;
}
a{
  float:left;
  text-decoration:none;
  font-size:14px;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
/*menu1だけ*/
.menu1{
  max-width:800px;
}
.menu1 a{
  width:calc(25% - 2px);
  color:#333;
  border-right:2px solid #aaa;
  text-align:center;
}
.menu1 a:first-of-type{
  border-left:2px solid #aaa;
  width:calc(25% - 4px);
}
.menu1 a:hover{
  color:#f00;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
/*menu2だけ*/
.menu2{
  background:#00adf2;
  max-width:800px;
  padding:10px calc(50% - 400px);
}
.menu2 a{
  width:calc(25% - 2px);
  padding:10px 0;
  color:#fff;
  border-right:2px solid #fff;
  text-align:center;
}
.menu2 a:first-of-type{
  border-left:2px solid #fff;
  width:calc(25% - 4px);
}
.menu2 a:hover{
  color:#00adf2;
  background:#fff;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
@media screen and (max-width:768px){
  .menu2 a{
    font-size:11px;
  }
}
/*menu3だけ*/
.menu3{
  padding:10px 0;
  width:90%;
  margin:0 auto;
}
.menu3 .menu-left{
  float:left;
  width:50%;
  margin-right:30%;
}
.menu3 .menu-right{
  float:right;
  width:20%;
}
.menu3 a{
  width:21%;
  padding:5px 0;
  margin:0 2%;
  color:#333;
  text-align:center;
  float:left;
}
.menu3 .menu-right a{
  float:none;
  width:calc(80% - 4px);
  display:block;
  margin:0 10%;
  color:#fff;
  border:2px solid #e8aa00;
  background:#e8aa00;
}
.menu3 a:hover{
  color:#e8aa00;
  background:#fff;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
@media screen and (max-width:768px){
  .menu3 .menu-left{
    width:70%;
    margin-right:3%;
  }
  .menu3 .menu-right{
    float:right;
    width:27%;
  }
  .menu3 a{
    font-size:11px;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.