アコーディオンメニュー（ドロップダウンメニュー）の出し方について

###実現したいこと
子階層のメニューを、親階層のメニュー名をホバーで表示するようにしているのですが、子階層を表示する際に、親階層の要素を動かさずに子階層だけパラパラと表示（親階層に影響を与えず独立）されるようにしたいです。

###現状
表現がうまくできないのですが、子階層を表示するときに親階層のメニューや会社ロゴなども子階層分高さができてしまい、間延びしてしまうような感じになっています

#####コード
親階層のナビゲーションメニューバーはBootstrap4を利用しています。

html
1    <nav class="navbar navbar-expand-lg fixed-top navbar-light ">
2        <img src="img/logo.png" alt="会社ロゴ" width="250">
3      <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#gnavi" aria-controls="Navber" aria-expanded="false" aria-label="Toggle navigation">
4        <span class="navbar-toggler-icon"></span>
5      </button>
6      <div id="gnavi" class="collapse navbar-collapse">
7        <ul class="nav navbar-nav">
8          <li><a href="menu1.php">menu1</a></li>
9          <li><a href="menu2.html">menu2</a></li>
10          <li><a href="menu3.php#2">menu3</a></li>
11          <li><a href="menu4.php#4">menu4</a>
12            <ul>
13              <li class="accordion"><a href="sub_menu1.html">子メニュー１</a></li>
14              <li class="accordion"><a href="sub_menu2.html">子メニュー２</a></li>
15              <li class="accordion"><a href="sub_menu3.html">子メニュー３</a></li>
16              <li class="accordion"><a href="sub_menu4.html">子メニュー４</a></li>
17              <li class="accordion"><a href="sub_menu5.html">子メニュー１</a></li>
18            </ul>  
19          </li>
20          <a href="index.php#6" class="contact">contact</a>
21          <a href="about.html" class="about">about</a>  
22        </ul>
23      </div>
24    </nav>

css
1nav li:not(.col-xl-2) {
2    float: left;
3    flex: 1 0 auto;
4}
5nav li a:not(.col-xl-2) {
6    text-decoration: none;
7    text-align: center;
8    width: 100%;
9    display: block;
10    margin-top: 10px;
11    padding: 10px 0;
12}
13nav li a:hover {
14    background-color: #dfdfdf;
15    color: #adadad;  
16}
17  
18nav a:hover :not(.col-xl-2, .consul, .contact) {
19    background-color: #dfdfdf;
20    color: #adadad;  
21}
22
23
24/*子階層*/
25.nav ul {
26    text-align: center;
27}
28.nav li li {
29    height: 0;
30    overflow: hidden;
31    transition: .5s;
32    clear: both;
33}
34.accordion a {
35    margin-top: 0 !important;
36    padding: 10px 20px !important;
37    text-align: center;
38}
39.nav li li a {
40    border-top: 1px solid #eee;
41}
42.nav li:hover > ul > li {
43    height: 2rem;
44    overflow: visible;
45}
46