css - 非表示のサブメニューの CSS カウンター

Question

<ul>ネストされたを使用してドロップダウンメニューを作成しようとしています<li>。CSS カウンターで生成された数値が表示されます。

サブメニューはdisplay:noneホバーしないと非表示になります。

display私の問題は、要素がに設定されているときにカウンターがインクリメントされないことnoneです。

これを防ぐCSSプロパティを知っていますか?

に置き換えると機能display: noneしvisibility: hiddenますが、これをメニューに使用するのが良いかどうかわかりません。トラップはありますか?

score 4 · Accepted Answer

を 0px にdisplay: none設定することで (非表示の) 動作を模倣できます。これにより、カウンタープロパティによって要素がカウントされます。font-size

.hidden{
    font-size: 0px;
}

または、上記のもう少し複雑なバージョン (コメントでHashem Qolamiが言及)

.hidden{
    font: 0/0 a; 
    visibility: hidden;
}

注: visibility: hiddenも機能しますが、出力に 1 行の高さに相当するスペースが残ります。

1 に答える 1