3

次のような構造の水平ドロップダウン メニューがあるとします。

<ul class="root">
  <li class="root-item">
    <ul class="submenu">
        <li></li>
        <li></li>
        <li></li>
    </ul>
  </li>
  ...
  <li class="root-item">
    <ul class="submenu">
        <li></li>
        <li></li>
        <li></li>
    </ul>
  </li>
</ul>

css はおおよそ次のようになります。

.root-item{
    position:relative;
    display:inline-block;
}
.submenu{
    position:absolute;
    top:-1000px;
}
.root-item:hover .submenu{
    top:100%;
}

ここでの問題は次のとおりです。一部の (たとえば、最後の) .submenu の幅が十分に広い場合、.root の境界線からはみ出し、最終的にはビューポートからはみ出す可能性があります (.root の幅が VP の 100% の場合)。

私が望むのは、.submenu-s を .root に適合させることです。つまり、 .sumbenu の左右が負にならないということです。しかし -純粋な cssを使用すると、ここで javascript の使用をスキップできるかどうか、非常に興味があります。目的の結果は、ここのリボン メニューのようなものです。それは可能ですか？

ありがとう！

4

1 に答える 1

2

これはどう？

http://codepen.io/MisterGrumpyPants/pen/IwfDC

外観を肉付けするためのいくつかの境界線と背景に加えて、CSS に追加したのは 2 つのクラスのサブメニューです。右に、左に拡張します (「左へ」)。

これは、左に拡張する必要があるサブメニューと右に拡張できるサブメニューがわかっている場合に機能する単純なソリューションであり、サブメニューのクラスを制御できます。

(より複雑なものが必要な場合 (たとえば、「to-right」および「to-left」クラスを自分で適用する必要がない場合)、それにはもう少し検討が必要です。)

アップデート

:nth-childこれは、「右へ」および「左へ」のクラス名を手動で適用する代わりに、セレクターを使用してサブメニューがどちらの方向にスイングするかを決定する別のペンです。

http://codepen.io/MisterGrumpyPants/pen/ovJcH

于 2013-08-31T00:05:10.317 に答える