jQuery动态设置top属性以在当前页面框架内显示巨大的子类别列表

Question

我的opencart站点中有一个左侧类别菜单。

有些代码是

<div id="menu_box">
<div class="box-heading">Categories</div>
<ul>
<li>
<a href="http://localhost/makeatech/index.php?route=product/category&amp;path=224">Game Cd's</a> 
<ul class="second-level" style="position: absolute; left: 166px; top: -2px; padding: 5px; margin: 0px; width: 350px; background-color: rgb(245, 245, 245); border: 1px solid rgb(236, 236, 236); z-index: 10; display: block;">
<li id="third-li">
<a href="http://localhost/makeatech/index.php?route=product/category&amp;path=224_226"> SONY Playstations</a>                            
</li>
<li id="third-li">
<a href="http://localhost/makeatech/index.php?route=product/category&amp;path=224_225"> Xbox</a>
</li>
</ul>
</li>
<li>.......</li>                     
</ul>
</div>   

我有一个巨大的类别列表，有3个级别的子类别。因此，下面的类别将进入屏幕。

我知道问题出在fixed top css上。有没有什么方法可以像flipkart.com 一样使用jquery在屏幕上显示我的所有类别

请给我你的建议。

谢谢。

Answer 1

要实现flipkart.com这样的菜单，父级和子级之间应该有relative->absolute关系。举个例子：

• 使主菜单(父菜单)具有position: relative;(UL<div class="box-heading">之后的元素)
• 使子菜单元素(子菜单)具有position: absolute;(您在<ul class="second-level">上已经有了它)
• 您还应该将孩子们带出屏幕(使用left: -999em;或使用display: none;)

一个基本的CSS样式可能看起来像：

.box-heading > ul {
position: relative;
}
.box-heading .second-level {
position: absolute; 
left: -999em; 
top: -2px; 
padding: 5px; 
margin: 0px; 
width: 350px; 
background-color: rgb(245, 245, 245); 
border: 1px solid rgb(236, 236, 236); 
z-index: 10; 
display: block;
}
.box-heading li:hover .second-level {
left: 166px;
}