更改绘图边框的优先级

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

根据您的屏幕截图，我猜测您正在尝试更改最左侧框的边框颜色。

而不是＆＃34;覆盖＆＃34;使用红色边框上的灰色边框，我建议使用CSS专门定位那些顶级<li>，并将这些元素的边框设置为红色。您可以使用CSS直接后代选择器来执行此操作：

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

以下完整示例（点击＆＃34;运行代码段＆＃34;）：

＆＃13;

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您的图片

从您的图片（我上面发布的图片）中，我相信您正在寻找类似的内容：

＆＃13;

＆＃13;

#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;
}
  

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;