1

嗨，我的 css 中有一个问题，我不知道如何解决我不确定是否有办法解决它，但这里有。

假设我们有这个 html：

<ul id="menu">
   <li>
       <a href="#">Auto-moto, piese, accesorii<i class="icon-caret-right"></i></a>
       <ul class="product-submenu">
                <li><a href="#"><i>Auto-moto, piese, accesorii</i> <span>Short description</span></a></li>
                 <li><a href="#"><i>Item</i><span>Short description</span></a></li>
                 <li><a href="#"><i>Auto-moto, piese, accesorii</i><span>Short description</span></a></li>
                 <li><a href="#"><i>Item</i><span>Short description</span></a></li>
                 <li><a href="#"><i>Item</i><span>Short description</span></a></li>
         </ul>
   </li>
</ul>

这个CSS：

ul#menu{
    -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow:    5px 5px 5px 0px rgba(0, 0, 0, 0.25);
    box-shadow:         5px 5px 5px 0px rgba(0, 0, 0, 0.25);
    position:relative;
}
ul.product-submenu{
     position:absolute;
}

例如，如果我希望能够将 ul#menu 设置在 ul.product-submenu 之上，鉴于 ul.product-submenu 是 ul#menu 的子项，我将如何实现这一点？

这本来可以用 z-index 轻松解决，标签是兄弟姐妹，但在这种情况下，我似乎无法弄清楚。

我在这个链接中添加了一个小提琴，我想要的是能够将红色容器设置在绿色容器之上：fiddle

4

1 回答 1

1

Lister 先生的建议有效，如果您将 20px 添加到 ul.product-submenu 的顶部属性，那么它将显示子菜单。

JSFiddle：http: //jsfiddle.net/5rmgR/3/

ul.product-submenu{
     position:absolute;
    background-color:green;
    top:20px;
    left:100px;
    z-index:-1;
}

如果您只需将 20px 添加到 top 属性，您甚至可以在没有 z-index 的情况下逃脱。

如果您希望菜单在该术语的其他含义中位于顶部，那么您可以尝试这样的操作： JSFiddle: http://jsfiddle.net/5rmgR/6/

ul#menu{
    background-color:red;
}
ul.product-submenu{
    position:relative;
    background-color:green;
    top:0;
    left:100px;
    width: 50%;
    z-index: -1;
}
于 2013-06-15T14:48:49.913 回答