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

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. 有什么方法可以使用 jquery 在屏幕上显示我的所有类别，比如Flipkart.com

请给我你的建议。

谢谢。

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;
}