html - マウスオーバー後でもリストの最初のセットにのみ境界線を適用

Question

<ul id="menu">
  <li>first set<li>
     <ul>
       <li>second set</li>
       <li>second set</li>
     </ul>
  <li>first set<li>
  <li>first set<li>
</ul>

を使用して、リストの最初のセットにborder-leftを適用しました

#menu li
{
  border-left: 1px solid black;
}

ただし、マウスオーバーすると、最初のセット、2 番目のセットのリストに 2px の左端の境界線が表示されます。しかし、私は2番目のセットに境界線を残したくありません。この 2px を削除するにはどうすればよいですか?

を使用して1pxを削除できました

#menu ul li
{
  border-left: 0px;
}

2番目のセットの別の1px境界を削除するにはどうすればよいですか?.

Answer 1

ボーダーを最初のセットに制限する#menu > li代わりに、CSS で使用します。#menu li

すなわち

#menu > li
{
  border-left: 1px solid black;
}

アップデート

OPによって投稿されたフィドル- http://jsfiddle.net/DrJsr/3/によると、マークアップは次のとおりです。

<ul id="menu">
  <li>first set<li>
     <ul>
       <li>second set</li>
       <li>second set</li>
     </ul>
  <li>first set<li>
  <li>first set<li>
</ul> 

上記のいくつかの問題があります。

• 一部の LI はクローズされていません。これにより、一部のブラウザが別のファイルの開始と誤解する可能性があります。
• 2 番目のセットの UL は、メイン UL の直接の子です。これは HTML では無効です。2 番目の UL は、メイン UL 内の LI のいずれかの子であることが理想的です。

さて、ボーダーに関しては、実際には正しく機能しています。Firebug または Chrome を使用して 2 番目のセットの UL を検査すると、ブラウザが 2 番目のセットの UL をラップする LI を自動的に追加し、それによって HTML が自動的に有効になることがわかります。

つまり、HTML は自動的に次のようになります。

<ul id="menu"> 
  <li>first set</li>
  <li> <!-- this is added by browser and this LI will have a left border since it falls under #menu > li -->
     <ul> 
       <li>second set</li> 
       <li>second set</li> 
     </ul> 
  </li>
  <li>first set</li>
  <li>first set</li>
</ul> 

この新しい LI は該当#menu > liし、左の境界線をレンダリングします。Firebug をチェックインすると、表示されている左の境界線が、この新しい LI 用にレンダリングされたものであることがわかります。

Answer 2

問題を解決するためのさまざまなアプローチがあります。次に例を示します。

1. 境界線のスタイルを設定するために、リストの2番目のセットを指すセレクターを持つCSSルールを作成します。

   #menu li li {border-left:0;}
   

2. より良い方法は、リストの2番目のセットにクラスまたはIDを追加し、そのCSSルールを作成することです。2番目のリストにclass="sub-menu"を追加したと仮定した場合は<ul>、次のCSSルールを追加します。

   #menu ul.sub-menu li {border-left:0;}
   

Answer 3

もしかしてこれ？

#menu:first-child
{
border-left: 1px solid black;
}