アコーディオン 入れ子の行間調整

実現したいこと

アコーディオンの入れ子で行間が違うので行間を合わせたい

前提

このサイトからコピペしたものですが
https://techmemo.biz/css/acordion-css/
入れ子のある場合とない場合で、行間が違うので行間を合わせたいと思っています。

### 該当のソースコード HTML <ul class="menu"> <li> <a href="#">メニュー1</a> <ul> <li><a href="#">サブメニュー1</a></li> <li><a href="#">サブメニュー2</a></li> <li><a href="#">サブメニュー3</a></li> </ul> </li> <li> <a href="#">メニュー2</a> <ul> <li><a href="#">サブメニュー1</a></li> <li><a href="#">サブメニュー2</a></li> <li><a href="#">サブメニュー3</a></li> </ul> </li> <li> <a href="#">メニュー3</a> <ul> <li><a href="#">サブメニュー1</a></li> <li><a href="#">サブメニュー2</a></li> <li><a href="#">サブメニュー3</a></li> </ul> </li> <li> <a href="#">メニュー4</a> </li> </ul> CSS .menu { width: 100%; margin: 1em auto; padding: 0; } .menu li { list-style: none; } .menu li a { display: table; margin-top:1px; padding: 10px 10px; width: 100%; font-weight: bold; text-align: center; box-shadow: 5px 5px 5px #aaa; background: linear-gradient(-80deg, #ff65ff, #65ffff); text-decoration: none; vertical-align: middle; color: #ffffff; overflow: hidden; transition:all .5s ease-out; } .menu > li:first-child a { margin-top: 0; } .menu li a:hover { background: #ff8c04; transition:all .5s ease-out; } .menu li ul { margin: 0; padding: 0; } .menu li li a { display: block; margin-top: 0; padding: 0 10px; height: 0; background: #ffccff; color: #ffffff; transition:all .5s ease-out; } .menu > li:hover li a { display: table; margin-top: 1px; padding: 10px; width: 100%; height: 1em; transition:all .5s ease-out; } .menu > li:hover li a:hover { background: #ffb8b3; transition:all .5s ease-out; } ### 試したこと margin: 1em auto;をmargin: 0;に .menu li a { の margin-top:1px;をmargin-top: 0;に padding: 10px 10px;を padding: 0;に .menu li li a { の padding: 0 10px;を padding: 0;に 上記を一つ一つ変更してみましたがだめでした。 行間調整方法を教えてください。 よろしくお願いいたします。