HTML/CSS 样式

Question

我创建了一个学习 HTML/CSS 的小示例。

我在菜单栏上有“菜单”和“季节”。

当用户将鼠标放在“菜单”上(悬停)时，需要显示“元素 A”和“元素 B”。

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

我试图实现它，但没有做对。对我来说，当我将鼠标放在“菜单”上时，它会显示所有元素，例如“元素 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>

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>

顺便说一句:我在我的代码片段中添加了一些结束标记，这些标记在问题中发布的代码中丢失