HTML＋CSS

【HTML】

<ul class="gnav">
<li><a href="">メニュー１</a>
<ul>
  <li><a href="">サブメニュー１１１１</a></li>
  <li><a href="">サブメニュー２</a></li>
</ul>
</li>
<li><a href="">メニュー２</a></li>
</ul>

【CSS】

.gnav {
    display: block;
    height: 2rem;
    margin: 0 auto;
    width: 1000px;
}
.gnav > li {/*親階層のみ幅を25%にする*/
    width: 15%;
}
/*全てのリスト・リンク共通*/
.gnav li {
    list-style: none;
    position: relative;
}
.gnav li a {
    background: #001b34;
    border-right: 1px solid #eee;
    color: #fff;
    display: block;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    text-decoration: none;
    width: 100%;
}
/*子階層以降共通*/
.gnav li ul{
kist-style: none;
top: 100%;
left: 0;
margin: 0;
padding: 0;
border-radius: 0 0 3px 3px;
}
.gnav li li {
    height: 0;
    width:120%;
    overflow: hidden;
    transition: .5s;
}
.gnav li li a {
    border-top: 1px solid #eee;
}
.gnav li:hover > ul > li {
    height: 2rem;
    overflow: visible;
}