悬停子菜单二级元素时无法到达子菜单一级元素

Question

.siteHeader {
  height: 200px;
  background-color: black;
  color: white;
  background-image: url(https://placehold.jp/150x150.png);
  background-repeat: no-repeat;
  background-position: 10px 80%;
  background-size: 90px 90px;
  position: relative;
  padding: 10px;
}

.siteHeader h1 {
  text-align: center;
}

.icon {
  font-size: 50px;
}

.fixedMenu {
  position: absolute;
  right: 20px;
  visibility: visible;
}

.siteHeader input {
  z-index: 3;
  height: 50px;
  width: 50px;
  opacity: 0;
}

.siteHeader input:hover {
  cursor: pointer;
}

.siteHeader i {
  z-index: 1;
}

.siteHeader nav {
  position: absolute;
  right: 100px;
  display: none;
}

.siteHeader ul {
  padding-left: 0;
  list-style-type: none;
}

.siteHeader ul.firstLevel {
  position: absolute;
  display: none;
}

.siteHeader ul.secondLevel {
  display: none;
}

.siteHeader ul.firstLevel li {
  display: block;
}

.siteheader ul.secondLevel li {
  display: block;
}

.siteHeader li {
  display: block;
}

.siteHeader li:hover ul.firstLevel {
  display: block;
}

.siteHeader ul.firstLevel li:hover ul.secondLevel {
  display: block;
}

.siteHeader input:checked~nav {
  display: block;
}

.siteHeader a {
  display: block;
  text-decoration: none;
  background-color: white;
  color: black;
  padding: 20px;
}

.siteHeader a:hover {
  background-color: black;
  color: white;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">

<header class="siteHeader">
  <h1>NomDeDomaine.com</h1>
  <input type="checkbox" class="fixedMenu">
  <i class="bi bi-list icon fixedMenu"></i>
  <nav>
    <ul>
      <li>
        <a href="#">menu item 1</a>
      </li>
      <li>
        <a href="#">menu item 2</a>
      </li>
      <li>
        <a href="#">menu item 3</a>
        <ul class="firstLevel">
          <li>
            <a href="#">sub-menu item 1</a>
          </li>
          <li>
            <a href="#">sub-menu item 2</a>
            <ul class="secondLevel">
              <li><a href="#">sub-sub-menu item 1</a></li>
              <li><a href="#">sub-sub-menu item 2</a></li>
              <li><a href="#">sub-sub-menu item 3</a></li>
            </ul>
          </li>
          <li>
            <a href="#">sub-menu item 3</a>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</header>

当我到达子菜单项 3 时，我无法再到达子菜单项 3...因为它不再悬停，如何解决？

Answer 1

您需要偏移子菜单，以便它们不会覆盖上一个菜单。

我删除了

padding: 20px

中的

display: block

和

.siteHeader a

，因为我为导航菜单中的所有

<li>

定义了高度，并将

<a>

变成了弹性框以垂直对齐文本。

我在最顶部添加了 CSS，以便您可以看到更改。除了我删除（标记）的 2 行 CSS 之外，其他一切都保持不变。

/* ANSWER START */
nav li {
    position: relative;
    width: 120px;
    height: 60px;
    box-sizing: border-box;
}

nav li a {
    height: 100%;
    display: flex;
    align-items: center;
}

.firstLevel {
    position: relative;
    right: 120px;
    top: 0px;
}

.secondLevel {
    position: absolute;
    right: 120px;
    top: 0px;
}

/* ANSWER END */

.siteHeader {
    height: 200px;
    background-color: black;
    color: white;
    background-image: url(https://placehold.jp/150x150.png);
    background-repeat: no-repeat;
    background-position: 10px 80%;
    background-size: 90px 90px;
    position: relative;
    padding: 10px;
}

.siteHeader h1 {
    text-align: center;
}

.icon {
    font-size: 50px;
}

.fixedMenu {
    position: absolute;
    right: 20px;
    visibility: visible;
}

.siteHeader input {
    z-index: 3;
    height: 50px;
    width: 50px;
    opacity: 0;
}

.siteHeader input:hover {
    cursor: pointer;
}

.siteHeader i {
    z-index: 1;
}

.siteHeader nav {
    position: absolute;
    right: 100px;
    display: none;
}

.siteHeader ul {
    padding-left: 0;
    list-style-type: none;
}

.siteHeader ul.firstLevel {
    position: absolute;
    display: none;
}

.siteHeader ul.secondLevel {
    display: none;
}

.siteHeader ul.firstLevel li {
    display: block;
}

.siteheader ul.secondLevel li {
    display: block;
}

.siteHeader li {
    display: block;
}

.siteHeader li:hover ul.firstLevel {
    display: block;
}

.siteHeader ul.firstLevel li:hover ul.secondLevel {
    display: block;
}

.siteHeader input:checked~nav {
    display: block;
}

.siteHeader a {
    /* display: block; */ /* REMOVE */
    text-decoration: none;
    background-color: white;
    color: black;
    /* padding: 20px; */ /* REMOVE */
}

.siteHeader a:hover {
    background-color: black;
    color: white;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
<header class="siteHeader">
    <h1>NomDeDomaine.com</h1>
    <input type="checkbox" class="fixedMenu">
    <i class="bi bi-list icon fixedMenu"></i>
    <nav>
        <ul>
            <li>
                <a href="#">menu item 1</a>
                <ul class="firstLevel">
                    <li>
                        <a href="#">sub-menu item 1</a>
                        <ul class="secondLevel">
                            <li><a href="#">sub-sub-menu item 1</a></li>
                            <li><a href="#">sub-sub-menu item 2</a></li>
                            <li><a href="#">sub-sub-menu item 3</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">sub-menu item 2</a>
                        <ul class="secondLevel">
                            <li><a href="#">sub-sub-menu item 1</a></li>
                            <li><a href="#">sub-sub-menu item 2</a></li>
                            <li><a href="#">sub-sub-menu item 3</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">sub-menu item 3</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">menu item 2</a>
            </li>
            <li>
                <a href="#">menu item 3</a>
                <ul class="firstLevel">
                    <li>
                        <a href="#">sub-menu item 1</a>
                        <ul class="secondLevel">
                            <li><a href="#">sub-sub-menu item 1</a></li>
                            <li><a href="#">sub-sub-menu item 2</a></li>
                            <li><a href="#">sub-sub-menu item 3</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">sub-menu item 2</a>
                        <ul class="secondLevel">
                            <li><a href="#">sub-sub-menu item 1</a></li>
                            <li><a href="#">sub-sub-menu item 2</a></li>
                            <li><a href="#">sub-sub-menu item 3</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">sub-menu item 3</a>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>
</header>