nav{
  background-color: lightblue;
  width:100%;
  z-index: 200;
}  
.gnav {
  display: flex;
  height: 2rem;
}
.gnav > li {/*親階層のみ幅を25%にする*/
  width: 25%;
}
/*全てのリスト・リンク共通*/
.gnav li {
  list-style: none;
  position: relative;
  
}
.gnav li a {
  background:lightblue;
  border-right: 1px solid #eee;
  color: darkblue;
  display: block;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
  text-decoration: none;
  width: 100%;
}

/*子階層以降共通*/
.gnav li li {
 height: 0;
 overflow: hidden;
 transition: .5s;
}
.gnav li li a {
 border-top: 1px solid #eee;
}
.gnav li:hover > ul > li {
 height: 2rem;
 overflow: visible;
 z-index: 200;
}
#nav_area{
  width:100%;
  margin: 0 auto;
  background-color: lightblue;
}