3

ホバー時にサブメニューを表示し、ホバーしたアイテムの右側に飛び出すポップアップメニューのスタイルを設定しようとしています。私の主な項目は を使用して 2 つの列に分割されてcolumn-countおり、ここから不幸が始まります。

Firefox では、すべてが期待どおりに動作します。ホバーされたアイテムがある場所にサブメニューが表示されます。Chrome では、サブメニューは一番左の列を基準にしてポップアップします。

4 つのケース (ホバーされたアイテム 3 と 9、Firefox と Chrome) が添付の画面に示されています。Firefox と Chrome の両方でデモを試して、私の言いたいことを確認してください。

4 番目のケースは、ポップアップの位置がずれていることを示しています

これに対するきちんとした解決策はありますか？column-span を試しましたが、うまくいきません。liポップアップを完全な高さにしたいので、アイテムの相対を作成できません。

ul.first {
    border:1px solid #888;
    position:relative;
    display:inline-block;
    margin:5px;
    padding:0;
    column-count:2;
    -moz-column-count:2;
    -webkit-column-count:2;
    column-rule:1px solid #888;
    -moz-column-rule:1px solid #888;
    -webkit-column-rule:1px solid #888;
    background-color:#eee;
}
ul.first li {
    list-style:none;
    display:block;
    width:200px;
    background-color:#eee;
    margin:2px;
    padding:5px;
}
ul.first li:hover {
    background-color:#ddd;
}
ul.first > li.hassub > ul {
    display:none;
    position:absolute;
    margin-left:100px;
    top:0;
    bottom:0;
    background-color:#ddd;
    padding:0 5px;
}
ul.first > li.hassub:hover > ul {
    display:inline-block;
}
ul.first > li.hassub > ul > li {
    background-color:#ddd;
}
ul.first > li.hassub > ul > li:hover {
    background-color:#eeffee;
}
<ul class="first">
    <li>Item 1</li>
    <li>Item 2</li>
    <li class="hassub">Item 3
        <ul>
            <li>Subitem 3-1</li>
            <li>Subitem 3-2</li>
            <li>Subitem 3-3</li>
            <li>Subitem 3-4</li>
        </ul>
    </li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li class="hassub">Item 9
        <ul>
            <li>Subitem 9-1</li>
            <li>Subitem 9-2</li>
            <li>Subitem 9-3</li>
            <li>Subitem 9-4</li>
        </ul>
    </li>
    <li>Item 10</li>
</ul>

http://jsfiddle.net/cfckw5jz/6/

4

2 に答える 2

0

多くの解決策があります：

解決策 1:簡単な解決策は、右側の列内のサブメニューに別のクラス (hassub2) を与え、別の margin-left を与えることです

.hassup2{
  left: 390px;
}

解決策 2:よりスマートな解決策は、5 より上の li 内のすべてのサブメニューに異なるマージンを与えることです。これは、nth-child を使用して実現できます。

ul.first > li:nth-child(n+5) > ul{
  left: 390px;
}

n + 5 = 5 を超える任意の要素 (この場合、すべての li が 5 を超える)

解決策 3: 2 つの UL に分割して左にフロートさせ (または display: inline-block を使用)、サブメニューの基準点となるように UL に相対的な位置を割り当てることもできます。

li{ list-style: none; }

ul.left,
ul.right{
  float: left;
  width: 200px;
  position: relative;
}

.right li,
.left li{
  float: left;
  width: 100%;
  background-color: #eee;
  margin: 2px;
  padding: 5px;
}

.right li ul,
.left li ul{
  display: none;
  position: absolute;
  left: 200px;
  top:0;
  height:100%;
}

.right li ul li,
.left li ul li{
  width: 100%;
  padding: 5px;
  margin: 2px;
}

.right li:hover ul,
.left li:hover ul{
  display: block;
}

ヒント:一貫したデザインを得るには、 margin-leftの代わりにLeftを使用します。left を使用すると、常に要素が左側から 200 ピクセル離れます。マージンの動作のように、その前に配置された要素に依存したり、影響を受けたりすることはありません。

ヒント: 絶対配置要素は、定義された位置を持つ最初の親を探し、それを基準点にします。したがって、絶対 div が直接の親 div を参照するようにするには、親に位置 (相対、固定、または絶対) を指定する必要があります。

于 2015-11-29T00:30:05.703 に答える