Ahmad Faiçal
Reputation: 45
CSS position probleme
i have a problem in my menu i've search 3 hours already and i couldn't solve the problem. here is my script : http://jsfiddle.net/z3MUU/ In Sections i have a sub menu named "sport de salle" this sub menu has other sub sub menus the problem is those sub sub menus don't appear
This is the html code. the css code is in the link of 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>
Upvotes: 0
Views: 102
Answers (1)
André Augusto Costa Santos
Reputation: 518
The problem is this height:
<ul style="height:60px" class="sf-menu">
Remove and on sub-menu set position to fixed:
position: fixed;
This should help solving your problem.
Upvotes: 1