未請求スペース - Wordpressのドロップダウンメニュー

Question

Wordpressテンプレートへのドロップダウンメニューの効果を得ることに問題があります。私はすでに何時間もやってみましたが、それは変わりません。私のCSSの知識はそれほど大きくないので、私はあなたに助けを求める。

子のテーマで機能するテンプレート関数のドロップダウンメニューに追加しました。私は、サブメニューから項目のために不要なギャップを取り除きたいと思います。例として、 "Test 1"と "dropmenu"の場合のような効果に興味があります。

子供コード：

.sub-menu { 
    visibility: hidden; /* hides sub-menu */ 
    opacity: 0; 
    top: 100%; 
    left: -20px; 
    height: 0px; 
    width: 100%; 
    transform: translateY(-2em); 
    z-index: -1; 
    transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s; 
} 

.menu-item:hover .sub-menu { 
    visibility: visible; /* shows sub-menu */ 
    opacity: 1; 
    display: block; 
    height: 64px; 
    z-index: 1; 
    transform: translateY(0%); 
    transition-delay: 0s, 0s, 0.3s; /* this removes the transition delay so the menu will be visible while the other styles transition */ 

} 

.menu-item { 
    position: relative; 
    display: inline-block; 
} 

画像：explanation

ウェブサイト：here link

Answer 1

スペースが.sub-menuから来ています。 .sub-menuにheight: 0;がありますが、それは良いですが、liのマージントップがあふれていて、そのスペースを作成しています。

overflow: hidden;〜.sub-menuを追加しているようです。