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 で簡単に解決できたはずですが、この場合、私はそれを理解できないようです。

このリンクにフィドルを追加しました。私が望むのは、赤いコンテナを緑のコンテナの上に設定できるようにすることです:フィドル

4

1 に答える 1

1

リスター氏の提案は機能し、ul.product-submenu の top 属性に 20px を追加すると、サブメニューが明らかになります。

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 に答える