描画境界線の優先度を変更する

Question

<div>境界線を<li>境界線より描画したい。 をしかし、私はそれを描きたい： 今ではそのように見 すべての私のコードをJsFiddle上：あなたの応答のための

#mainmenu ul ul { 
 
    display: none; 
 
} 
 
#mainmenu ul { 
 
    list-style-type: none; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
#mainmenu ul li { 
 
    list-style-type: none; 
 
    text-align: center; 
 
    width: 120pt; 
 
    height: 20pt; 
 
    padding: 10pt 0pt 10pt 0pt; 
 
    border: 2px gray solid; 
 
} 
 
#mainmenu ul li:hover { 
 
    background-color: gray; 
 
} 
 
#mainmenu ul li:hover ul { 
 
    position: absolute; 
 
    top: 10px; 
 
    left: 130pt; 
 
    display: block; 
 
} 
 
#mainmenu h1 { 
 
    font-size: 14pt; 
 
    margin: 0px; 
 
} 
 
#mainmenu { 
 
    display: inline-block; 
 
    border: 2px red solid; 
 
}

<div id="mainmenu"> 
 
    <ul> 
 
    <li> 
 
     <h1>Семинар 1</h1> 
 
     <ul> 
 
     <li>Задача 1</li> 
 
     <li>Задача 2</li> 
 
     <li>Задача 3</li> 
 
     </ul> 
 
    </li> 
 
    <li> 
 
     <h1>Семинар 2</h1> 
 
     <ul> 
 
     <li>Задача 1</li> 
 
     <li>Задача 2</li> 
 
     <li>Задача 3</li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

ビッグありがとう！

Answer 1

あなたの画像：

あなたのイメージから

（私は上記の投稿をしていること）、私はあなたがこのような何かを探していると信じて：

#mainmenu ul ul { 
 
    display: none; 
 
} 
 
#mainmenu ul { 
 
    list-style-type: none; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
#mainmenu ul li { 
 
    list-style-type: none; 
 
    text-align: center; 
 
    width: 120pt; 
 
    height: 20pt; 
 
    padding: 10pt 0pt 10pt 0pt; 
 
} 
 
ul li ul li { 
 
    border: 2px gray solid; 
 
    margin-left:6px; 
 
} 
 
#mainmenu ul li:hover { 
 
    background-color: gray; 
 
} 
 
#mainmenu ul li:hover ul { 
 
    position: absolute; 
 
    top: 10px; 
 
    left: 130pt; 
 
    display: block; 
 
} 
 
#mainmenu h1 { 
 
    font-size: 14pt; 
 
    margin: 0px; 
 
    z-index:2; 
 
} 
 
#mainmenu { 
 
    display: inline-block; 
 
    border: 6px red solid; 
 
} 
 

<div id="mainmenu"> 
 
    <ul> 
 
    <li> 
 
     <h1>Семинар 1</h1> 
 
     <ul> 
 
     <li>Задача 1</li> 
 
     <li>Задача 2</li> 
 
     <li>Задача 3</li> 
 
     </ul> 
 
    </li> 
 
    <li> 
 
     <h1>Семинар 2</h1> 
 
     <ul> 
 
     <li>Задача 1</li> 
 
     <li>Задача 2</li> 
 
     <li>Задача 3</li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 2

あなたのスクリーンショットに基づいて、左端のボックスの境界線の色を変更しようとしていると思います。

灰色の枠線を赤い枠で「覆う」のではなく、CSSで最上位の<li>をターゲティングし、それらの要素の境界線を赤に設定することをおすすめします。あなたはそれを行うためにCSS直系の子孫セレクタを使用することができます。以下は

#mainmenu > ul > li { 
    border: 2px solid red; 
} 

---

全例（ "実行コードスニペット" をクリックしてください）：

#mainmenu ul ul { 
 
    display: none; 
 
} 
 

 
#mainmenu ul { 
 
    list-style-type: none; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
#mainmenu ul li { 
 
    list-style-type: none; 
 
    text-align: center; 
 
    width: 120pt; 
 
    height: 20pt; 
 
    padding: 10pt 0pt 10pt 0pt; 
 
    border: 2px gray solid; 
 
} 
 

 
#mainmenu > ul > li { 
 
    border: 2px solid red; 
 
} 
 

 
#mainmenu ul li:hover { 
 
    background-color: gray; 
 
} 
 
#mainmenu ul li:hover ul{ 
 
    position: absolute; 
 
    top: 10px; 
 
    left: 130pt; 
 
    display: block; 
 
} 
 
#mainmenu h1 { 
 
    font-size: 14pt; 
 
    margin: 0px; 
 
} 
 

 
#mainmenu { 
 
    display: inline-block; 
 
}

<div id="mainmenu"> 
 
    <ul> 
 
     <li><h1>Семинар 1</h1> 
 
      <ul> 
 
       <li>Задача 1</li> 
 
       <li>Задача 2</li> 
 
       <li>Задача 3</li> 
 
      </ul> 
 
     </li> 
 
     <li><h1>Семинар 2</h1> 
 
      <ul> 
 
       <li>Задача 1</li> 
 
       <li>Задача 2</li> 
 
       <li>Задача 3</li> 
 
      </ul> 
 
     </li> 
 
    </ul> 
 
</div>