我的菜单有问题，我已经搜索了 3 个小时，但我无法解决问题。这是我的脚本： http: //jsfiddle.net/z3MUU/ 在部分我有一个名为“sport de salle”的子菜单这个子菜单有其他子子菜单问题是那些子子菜单不出现
这是html代码。CSS 代码在 jsfiddle 的链接中。
<div id="menu" >
<ul class="menu menu-dropdown">
<li class="level1 item2 parent">
<a href="/nos-realisations.html" class="level1 item2 parent">
<span class="bg ">
<span class="title">Sections</span>
<span class="subtitle">Sections OCEJ</span>
</span>
</a>
<div class="dropdown columns4" style="width:720px; ">
<div>
<div class="dropdown-t1">
<div class="dropdown-t2">
<div class="dropdown-t3"></div>
</div>
</div>
<div class="dropdown-1">
<div class="dropdown-2">
<div class="dropdown-3">
<ul style="height: 164px;" class="col1 level2 first">
<li class="level2 item1 first parent separator">
<div class="group-box1">
<div class="group-box2">
<div class="group-box3">
<div class="group-box4">
<div class="group-box5">
<div class="hover-box1">
<div class="hover-box2">
<div class="hover-box3">
<div class="hover-box4">
<ul style="height:60px" class="sf-menu">
<li>
<a href="#" class="level2 item1 active">
Sports de Salle
</a>
<ul class="sub-menu">
<li><a href="#">3rd Level Menu</a>
<ul class="sub-menu">
<li><a href="#">Menu Item</a></li>
<li><a href="#">4th Level Menu</a>
<ul class="sub-menu">
<li><a href="#">Menu Item</a></li>
<li><a href="#"><span class="icon-thumbs-up sz-xxl"></span>Big Icon</a></li>
</ul>
</li>
<li><a href="#">Menu Item</a></li>
</ul>
</li>
<li><a href="#"><span class="icon-basket-1 sz-s"></span>Buy This Theme</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="level2 item2 parent separator">
<div class="group-box1">
<div class="group-box2">
<div class="group-box3">
<div class="group-box4">
<div class="group-box5">
<div class="hover-box1">
<div class="hover-box2">
<div class="hover-box3">
<div class="hover-box4">
<div class="hover-box4">
<a href="#" class="level2 item3 active">
<span class="bg icon" style="background-image: url();">Crystal</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="level2 item3 parent separator">
<div class="group-box1">
<div class="group-box2">
<div class="group-box3">
<div class="group-box4">
<div class="group-box5">
<div class="hover-box1">
<div class="hover-box2">
<div class="hover-box3">
<div class="hover-box4">
<div class="hover-box4">
<a href="#" class="level2 item3 active">
<span class="bg icon" style="background-image: url();">Crystal</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="level2 item4 last parent separator">
<div class="group-box1">
<div class="group-box2">
<div class="group-box3">
<div class="group-box4">
<div class="group-box5">
<div class="hover-box1">
<div class="hover-box2">
<div class="hover-box3">
<div class="hover-box4">
<div class="hover-box4">
<a href="#" class="level2 item4 active">
<span class="bg icon" style="background-image: url();">Crystal</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
<ul style="height: 164px;" class="col2 level2">
<li class="level2 item1 first parent separator">
<div class="group-box1">
<div class="group-box2">
<div class="group-box3">
<div class="group-box4">
<div class="group-box5">
<div class="hover-box1">
<div class="hover-box2">
<div class="hover-box3">
<div class="hover-box4">
<div class="hover-box4">
<a href="#" class="level2 item1 active">
<span class="bg icon" style="background-image: url();">Crystal</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="level2 item2 parent separator">
<div class="group-box1">
<div class="group-box2">
<div class="group-box3">
<div class="group-box4">
<div class="group-box5">
<div class="hover-box1">
<div class="hover-box2">
<div class="hover-box3">
<div class="hover-box4">
<div class="hover-box4">
<a href="#" class="level2 item3 active">
<span class="bg icon" style="background-image: url();">Crystal</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="level2 item3 parent separator">
<div class="group-box1">
<div class="group-box2">
<div class="group-box3">
<div class="group-box4">
<div class="group-box5">
<div class="hover-box1">
<div class="hover-box2">
<div class="hover-box3">
<div class="hover-box4">
<div class="hover-box4">
<a href="#" class="level2 item3 active">
<span class="bg icon" style="background-image: url();">Crystal</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="level2 item4 last parent separator">
<div class="group-box1">
<div class="group-box2">
<div class="group-box3">
<div class="group-box4">
<div class="group-box5">
<div class="hover-box1">
<div class="hover-box2">
<div class="hover-box3">
<div class="hover-box4">
<div class="hover-box4">
<a href="#" class="level2 item4 active">
<span class="bg icon" style="background-image: url();">Crystal</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
<ul style="height: 164px;" class="col3 level2">
<li class="level2 item1 first parent separator">
<div class="group-box1">
<div class="group-box2">
<div class="group-box3">
<div class="group-box4">
<div class="group-box5">
<div class="hover-box1">
<div class="hover-box2">
<div class="hover-box3">
<div class="hover-box4">
<div class="hover-box4">
<a href="#" class="level2 item1 active">
<span class="bg icon" style="background-image: url();">Crystal</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="level2 item2 parent separator">
<div class="group-box1">
<div class="group-box2">
<div class="group-box3">
<div class="group-box4">
<div class="group-box5">
<div class="hover-box1">
<div class="hover-box2">
<div class="hover-box3">
<div class="hover-box4">
<div class="hover-box4">
<a href="#" class="level2 item3 active">
<span class="bg icon" style="background-image: url();">Crystal</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="level2 item3 parent separator">
<div class="group-box1">
<div class="group-box2">
<div class="group-box3">
<div class="group-box4">
<div class="group-box5">
<div class="hover-box1">
<div class="hover-box2">
<div class="hover-box3">
<div class="hover-box4">
<div class="hover-box4">
<a href="#" class="level2 item3 active">
<span class="bg icon" style="background-image: url();">Crystal</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="level2 item4 last parent separator">
<div class="group-box1">
<div class="group-box2">
<div class="group-box3">
<div class="group-box4">
<div class="group-box5">
<div class="hover-box1">
<div class="hover-box2">
<div class="hover-box3">
<div class="hover-box4">
<div class="hover-box4">
<a href="#" class="level2 item4 active">
<span class="bg icon" style="background-image: url();">Crystal</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
<ul style="height: 164px;" class="col4 level2 last">
<li class="level2 item1 first parent separator">
<div class="group-box1">
<div class="group-box2">
<div class="group-box3">
<div class="group-box4">
<div class="group-box5">
<div class="hover-box1">
<div class="hover-box2">
<div class="hover-box3">
<div class="hover-box4">
<div class="hover-box4">
<a href="#" class="level2 item1 active">
<span class="bg icon" style="background-image: url();">Crystal</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="level2 item2 parent separator">
<div class="group-box1">
<div class="group-box2">
<div class="group-box3">
<div class="group-box4">
<div class="group-box5">
<div class="hover-box1">
<div class="hover-box2">
<div class="hover-box3">
<div class="hover-box4">
<div class="hover-box4">
<a href="#" class="level2 item3 active">
<span class="bg icon" style="background-image: url();">Crystal</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="level2 item3 parent separator">
<div class="group-box1">
<div class="group-box2">
<div class="group-box3">
<div class="group-box4">
<div class="group-box5">
<div class="hover-box1">
<div class="hover-box2">
<div class="hover-box3">
<div class="hover-box4">
<div class="hover-box4">
<a href="#" class="level2 item3 active">
<span class="bg icon" style="background-image: url();">Crystal</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="level2 item2 last parent separator">
<div class="group-box1">
<div class="group-box2">
<div class="group-box3">
<div class="group-box4">
<div class="group-box5">
<div class="hover-box1">
<div class="hover-box2">
<div class="hover-box3">
<div class="hover-box4">
<div class="hover-box4">
<a href="#" class="level2 item4 active">
<span class="bg icon" style="background-image: url();">Crystal</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="dropdown-b1">
<div class="dropdown-b2">
<div class="dropdown-b3"></div>
</div>
</div>
</div>
</div>
</li>
<li class="level1 item2 last">
<a href="/contact.html" class="level1 item7 last">
<span class="bg ">
<span class="title">Contact</span>
<span class="subtitle">Contactez-nous</span>
</span>
</a>
</li>
</ul>
</div>