ドロップダウンメニューのliが重ならないようにしたい

ドロップダウンメニューの孫要素のli同士が重なってしまっているようで押すことができません。
具体的には以下のhtmlになりますが、
小メニュー1を開いて孫テキスト2を選択しようとすると、なぜか小メニュー2の孫テキスト4が開く感じです…。

該当のソースコード

html
1<ul id="fade-in" class="header-menu">
2<li><a href="#">テスト1</a></li>
3<li><a href="#">テスト2</a></li>
4<li><a href="#">テスト3</a></li>
5<li><a href="#">テスト4</a></li>
6<li><a href="#">テスト5</a></li>
7<li><a href="#">テスト6</a>
8<ul>
9<li><a href="">小メニュー1</a>
10<ul>
11<li><a href="#">孫テキスト1</a></li>  
12<li><a href="#">孫テキスト2</a></li>
13<li><a href="#">孫テキスト3</a></li>  
14</ul>
15</li>
16<li><a href="">小メニュー2</a>
17<ul>
18<li><a href="#">孫テキスト4</a></li>
19<li><a href="#">孫テキスト5</a></li>  
20<li><a href="#">孫テキスト6</a></li>
21<li><a href="#">孫テキスト7</a></li>  
22</ul>
23</li>
24</ul>
25</li>
26</ul>
27

css
1.header-menu {
2  height: 68px;
3}
4.header-menu li {
5  position: relative;
6  list-style: none;
7  float: left;
8  height: 50px;
9  margin: 0;
10  padding: 0;
11  text-align: center;
12}
13
14.header-menu li ul {
15  list-style: none;
16  position: absolute;
17  z-index: 8888;
18  top: 100%;
19　width: 100%;
20  left: -100%;
21  margin: 0;
22  padding: 0;
23}
24.header-menu li ul li {
25  width: 100%;
26}
27.header-menu li ul li a {
28  padding: 13px 15px;
29  border-top: 1px solid #7c8c0e;
30  background: #fff;
31  text-align: left;
32  font-size: 14px;
33}
34.header-menu li:hover > a{
35 background: #ccc;
36}
37#fade-in li ul {
38  visibility: hidden;
39  opacity: 0;
40  transition: 0s;
41}
42#fade-in li:hover > ul {
43  visibility: visible;
44  opacity: 1;
45}
46#fade-in li ul li a{
47  visibility: hidden;
48  opacity: 0;
49  transition: .5s;
50}
51#fade-in li:hover > ul li a{
52  visibility: visible;
53  opacity: 1;
54}
55#fade-in li ul li ul {
56   position: absolute;
57   margin: 0;
58   padding: 0;
59   top: 0;
60   left: 100%;
61   width: 100%;
62}

試したこと

liに「height:0」を入れるといいという記述を見つけて試しましたがうまくいきませんでした。
どなたか教えていただけないでしょうか。よろしくおねがいします。

行動規範の内容に同意します

回答1件

ベストアンサー

メニューが複数あるので、「ホバーしているものの直下のもの（>）」に対して指定してあげてください。

CSS
1/*
2#fade-in li:hover > ul li a{
3  visibility: visible;
4  opacity: 1;
5}
6*/
7
8/* ↓ 以下のように変更 */
9
10#fade-in li:hover > ul > li > a{
11  visibility: visible;
12  opacity: 1;
13}
14