ネストされた順序付けられていないリストに基づくメニューがあります。すべてのスタイリングと表示は css を介して行われます。
メニューは固定幅の div で囲まれています。一部の最上位項目では、サブメニューに 1 行の項目が多すぎて、これらが 2 行目または 3 行目に折り返され、div の高さが拡張されます。これはうまくいきます。
私がやろうとしているのは、行数に関係なく、サブメニュー項目の行の間に水平線/分割線/境界線を追加し、幅が下または上 (できれば下) の行に等しいことです。明らかに、項目が 1 行しかない場合、行は表示されません。
全体の上部に背景を追加し<ul id="submenu">
てから、 を使用して最初の行から削除しようとしましul#submenu:first-line{}
たが、これは実行できないことに気付きました (ヘッドスラップ)。
次に、メニューの構造を変更して<p>
、div にネストされた要素を使用し、再び を使用しましdiv#submenu:first-line{}
たが、これをテストすると、奇妙な結果が得られます。たとえば、背景色は最初の行に表示されますが、サブメニュー項目の高さの半分しか表示されません。背景画像は、サブメニュー項目の中ほどに表示されます。現在の最上位メニュー項目をクリックするまで、何も表示されないことがあります。
<p>
リスト構造を、一連の要素を含む単一の要素に置き換えようとしても<a>
、同じ結果が得られました。
証拠は、私が:first-line
疑似要素を適切に使用していないことを示唆していますが、Web を読んでみると、これは機能するはずです。
私が間違っていることと、できればCSSを使用し、JSを使用せずにこれらの水平線を取得する方法についての提案はありますか?
これが私のコードです:
#subMenuContainer {
width:100%;
margin-top:20px;
}
#subMenu {
width:600px;
margin:0 auto;
text-align:center;
background:#ddd;
}
#sub {
border-top:2px solid green;
padding:0px;
line-height:30px;
}
#sub::first-line {
border-top:2px solid red; /* doesn't work */
background-color:pink; /* works */
color:yellow; /* doesn't work */
}
#sub p {
display:inline-block;
padding:0px;
}
#sub p a {
padding:0px 0px;
line-height:1em;
}
<div id="subMenuContainer">
<div id="subMenu">
<div id="sub" >
<p><a href="#">MenuItem1</a></p>
<p><a href="#">MenuItem2</a></p>
<p><a href="#">MenuItem3</a></p>
<p><a href="#">MenuItem4</a></p>
<p><a href="#">MenuItem5</a></p>
<p><a href="#">MenuItem6</a></p>
<p><a href="#">MenuItem7</a></p>
<p><a href="#">MenuItem8</a></p>
<p><a href="#">MenuItem9</a></p>
<p><a href="#">MenuItem10</a></p>
</div>
</div>
</div>