悬停时激活子菜单所有 li first-child

Question

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a>
       <ul>
          <li><a href="#">Digital</a></li>
          <li><a href="#">Design</a></li>
       </ul>
    <li><a href="#">Blog</a></li>
</ul>

无论何时在“服务”菜单上显示 li 和 sub，而当鼠标从服务中移出时则不显示。

Answer 1

您可以使用以下代码作为示例。

添加您自己的创意 CSS 使其独一无二。

  nav {
    display: block;
    text-align: center;
  }
  nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nav a {
    display: block;
    color: black;
    text-decoration: none;
    padding: 0.8em 1.8em;
    letter-spacing: 2px;
    position: relative;
  }
  .nav {
    vertical-align: top;
    display: inline-block;
    border-radius: 6px;
  }
  .nav li {
    position: relative;
  }
  .nav > li {
    float: left;
    margin-right: 1px;
  }
  .nav > li > a {
    margin-bottom: 1px;
  }

  /* submenu positioning*/
  .nav ul {
    position: absolute;
    white-space: nowrap;
    z-index: 1;
    left: -99999em;
  }
  .nav > li:hover > ul {
    left: auto;
    padding-top: 5px;
    min-width: 100%;
  }

<nav>
  <ul class="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li>
      <a href="#">Services</a>
      <ul>
        <li><a href="#">Digital</a></li>
        <li><a href="#">Design</a></li>
      </ul>
    </li>
    <li><a href="#">Blog</a></li>
  </ul>
</nav>