HTML/CSS样式化

Question

我创建了一个小例子来学习HTML/CSS。

我的菜单栏上有“菜单”和“季节”两个选项。

当用户将鼠标放在“菜单”上（使用hover），则需要显示“项目A”和“项目B”。

当用户将鼠标放在“项目A”上时，需要在其旁边显示“项目1”和“项目2”。

我尝试实现它，但做得不对。对我来说，当我将鼠标放在“菜单”上时，它会显示所有项目，如“项目A”，“项目B”，“项目1”和“项目2”。

我需要只有当光标放在“项目A”上时才显示“项目1”和“项目2”，并且不与框发生冲突。

以下是我的代码片段：

nav li {
  float: left;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 10000;
}

nav li ul {
  float: left;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 10000;
}

nav ul ul {
  font: 0/0 serif;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 2.5em;
  z-index: -1;
  -webkit-transition: all 0.5s ease-in;
  transition: all 0.5s ease-in;
  z-index: 10000;
}

nav ul li:hover ul {
  display: inline;
  font: inherit;
  z-index: auto;
  z-index: 10000;
}

nav a,
nav span {
  background-color: red;
  color: black;
  display: block;
  margin: 0.2em 0 0 0;
  padding: 0.2em 0.1em 0.2em 0.1em;
  text-decoration: none;
  width: 13.6em;
  -webkit-transition: all 0.5s ease-in;
  transition: all 0.5s ease-in;
  z-index: 10000;
}

nav ul li {
  margin: 0.2em 0 0 0.2em;
}

nav ul li ul {
  background-color: white;
  border: 1px solid black;
  width: 15.0em;
  nav ul li ul {
    background-color: white;
    border: 1px solid black;
    width: 15.0em;
  }
}

nav ul li ul li {
  background-color: white;
  width: 14.4em;
  padding: 0.0em 0.0em 0.0em 0.0em;
}

nav a:focus,
nav a:hover,
nav span {
  color: white;
  background-color: black;
  width: 13.4em;
}

<nav bgcolor="#727272">
  <ul>
    <li><a href="#">Menu</a>
      <ul>
        <li>
          <a href="#" target="ABC">Item A</a>
          <ul>
            <li><a href="#">Item 1</a>
            </li>
            <li><a href="#">Item 2</a></li>
          </ul>
        </li>
        <li>
          <a href="#" target="#">Item B</a>
      </ul>

      <li><a href="#">Seasons</a>
        <ul>
          <li>
            <a href="#" target="ABC">Season1 </a>
          </li>
          <li>
            <a href="#" target="ABC">Season 2</a>
        </ul>
  </ul>



  </li>

- John

---

HTML代码片段不完整，且在某些地方格式错误。您能否添加组成菜单系统的所有HTML代码？ - Professor Abronsius

Answer 1

您需要使用“直接后代”选择器在ul和li元素之间区分一级和二级子菜单，即使用>。

这样，您可以将这两个级别的CSS拆分如下：

nav > ul > li:hover > ul {
  display: block;
  font: inherit;
  z-index: 10000;
}

nav > ul > li > ul > li:hover > ul {
  display: block;
  position: absolute;
  left: 230px;
  top: 0;
  font: inherit;
  z-index: 20000;
}

nav li {
  float: left;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 10000;
}

nav ul > li > ul {
  float: left;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 10000;
}

nav ul > li > ul {
  font: 0/0 serif;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 2.5em;
  z-index: -1;
  -webkit-transition: all 0.5s ease-in;
  transition: all 0.5s ease-in;
  z-index: 10000;
}

nav > ul > li:hover > ul {
  display: block;
  font: inherit;
  z-index: 10000;
}

nav > ul > li > ul > li:hover > ul {
  display: block;
  position: absolute;
  left: 230px;
  top: 0;
  font: inherit;
  z-index: 20000;
}

nav a,
nav span {
  background-color: red;
  color: black;
  display: block;
  margin: 0.2em 0 0 0;
  padding: 0.2em 0.1em 0.2em 0.1em;
  text-decoration: none;
  width: 13.6em;
  -webkit-transition: all 0.5s ease-in;
  transition: all 0.5s ease-in;
  z-index: 10000;
}

nav ul li {
  margin: 0.2em 0 0 0.2em;
}

nav ul li ul {
  background-color: white;
  border: 1px solid black;
  width: 15.0em; 
}

nav ul li ul li {
  background-color: white;
  width: 14.4em;
  padding: 0.0em 0.0em 0.0em 0.0em;
}

nav a:focus,
nav a:hover,
nav span {
  color: white;
  background-color: black;
  width: 13.4em;
}

<nav bgcolor="#727272">
  <ul>
    <li><a href="#">Menu</a>
      <ul>
        <li>
          <a href="#" target="ABC">Item A</a>
          <ul>
            <li><a href="#">Item 1</a>
            </li>
            <li><a href="#">Item 2</a></li>
          </ul>
        </li>
        <li>
          <a href="#" target="#">Item B</a>
        </li>
      </ul>
    </li>

    <li><a href="#">Seasons</a>
      <ul>
        <li>
          <a href="#" target="ABC">Season1 </a>
        </li>
        <li>
          <a href="#" target="ABC">Season 2</a>
        </li>
      </ul>
    </li>
  </ul>

顺便说一下：在我的代码片段中，我添加了一些缺失在问题中发布的代码中的闭合标签

- Johannes

---

非常感谢。我之前不知道这个子菜单，现在我会去学习它。 - John

Answer 2

你应该改变你的：

nav ul li:hover ul {
    display: inline;
    font: inherit;
    z-index: auto;
    z-index: 10000;
}

To:

nav>ul li:hover>ul {
    display: inline;
    font: inherit;
    z-index: auto;
    z-index: 10000;
}
nav>ul li:hover>ul li:hover li {
    display: inline;
    font: inherit;
    z-index: auto;
    z-index: 10000;
}

"Nav ul" 的意思是 nav 中的每个 ul。
"Nav>ul" 的意思是 nav 的直接子级 ul。

https://www.w3schools.com/cssref/sel_element_gt.asp

- Marco Sagripanti