CSS位置问题
CSS位置问题
提问于 2013-10-13 20:55:43
我的菜单上有一个问题，我已经搜索了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>回答 1
Stack Overflow用户
发布于 2013-10-13 21:13:42
问题是这个高度：
<ul style="height:60px" class="sf-menu">Remove和on子菜单将位置设置为固定：
position: fixed;这应该有助于解决你的问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19345497
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号