HTML/CSS Styling

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

我在菜单栏上有"菜单"和"季节"。

当用户将鼠标放在"菜单"(hover(上时，需要显示"项目A"和"项目B"。

当用户将鼠标放在"项目 A"上时，"项目 1"和"项目 2"需要显示在"项目 1"的一侧。

我试图实现它，但没有做对。对我来说，当我将鼠标放在"菜单"上时，它会显示所有项目，例如"项目 A"、"项目 B"、"项目 1"、"项目 2"。

我需要"项目 1"和"项目 2"仅在光标

放在"项目 A"上时才显示，该光标也位于它的一侧而不会碰撞框。

这是我的代码片段

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>

您必须通过在

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>

顺便说一句：我在代码段中添加了一些结束标签，这些标签在问题中发布的代码中缺失

你应该改变你的：

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

自：

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

"导航 ul

"是指导航中的每个 ul。
"Nav>ul"表示只有 n 的直接子级。

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

相关内容

最新更新

热门标签：