0

タイトルが示すように、アンカーのホバーに div を表示しようとしています。疑似要素を使用して、div の上に「三角形」を表示しています。

ここにコードを投稿する代わりに、

それへのリンク

HTMLは次のとおりです。

<ul>
    <li class="menu__item has-sub">
        <a href="javascript:void(0);">Parent</a>
        <ul class="menu menu__sub">
            <li class="menu__item"><a href="javascript:void(0);">item 1 child 1</a></li>
            <li class="menu__item"><a href="javascript:void(0);">item 1 child 2</a></li>
            <li class="menu__item"><a href="javascript:void(0);">item 1 child 3</a></li>
            <li class="menu__item"><a href="javascript:void(0);">item 1 child 4</a></li>
            <li class="menu__item"><a href="javascript:void(0);">item 1 child 4</a>/li>
    </ul>
</li>
</ul>

sass を使用しているすべての css について申し訳ありませんが、それを css に逆コンパイルしました。

私の問題は、絶対配置と左右のハックを使用して配置しているため、コンテナーを常に親アイテムの中心に配置できないことです。

これを適切に行う方法がわからないので、誰かが助けてくれれば、長い間あなたを愛します!

また、css をクリーンアップする必要がある場合は、81 行という膨大な行を試してみますが、全体像を示したかったのです。

  • 明確にするために編集: ボックスを常に親テキスト (この場合は親) の中央に配置する必要がありますが、親テキストが asdfasdfasdf に変更された場合は、ボックスも中央に配置する必要があります。

基本的に、親のテキストやコンテンツに関係なく、ボックスは常に中央に配置する必要があります

すなわち:

                  Some Long Text Here
                   -------^-------
                   |   Content   |
                   |   Content   |
                   |   Content   |
                   ---------------

                       Text
               ----------^-----------
               |   Longer Content   |
               |   Longer Content   |
               |   Longer Content   |
               ----------------------
4

2 に答える 2

0

.menu__itemクラスでは、を削除してdisplay: inline-block追加するだけですtext-align: center;

では、.menu-sub左右の両方をゼロに設定しleft: 0; right: 0;、追加text-align: centerして中央にする必要があります。

Jsフィドル

于 2015-10-13T08:59:25.080 に答える