使用HTML+CSS实现鼠标划过的二级菜单栏的示例

下面是详细讲解"使用HTML+CSS实现鼠标划过的二级菜单栏的示例"的完整攻略：

1. 构建HTML结构

我们可以使用ul和li标签来构建有序列表（ol标签同理），然后使用a标签来创建菜单中的链接。我们需要考虑一下HTML结构，它将被用作CSS样式的基础。

下面是HTML结构示例：

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li>
      <a href="#">About</a>
      <ul>
        <li><a href="#">History</a></li>
        <li><a href="#">Team</a></li>
        <li><a href="#">Offices</a></li>
      </ul>
    </li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

我们在上面的代码中创建了一个导航元素

，其中包含了一个无序列表

。列表中的每个项目都是一个
• 元素，每个链接都包含在一个元素中。例如，在列表项目“About”下，我们创建了一个包含历史、团队和办事处的子列表。
  1. 编写CSS样式

  接下来，我们需要应用CSS样式来创建鼠标悬停的二级菜单栏。首先，我们需要将子菜单隐藏起来。我们可以使用CSS的display属性来实现它。通过将子菜单的display属性设置为none，我们可以让它在页面加载时不可见。

  nav ul ul {
    display: none;
  }
  

  下一步，我们需要让父元素的鼠标悬停事件来显示子菜单。使用CSS的:hover伪类实现。例如，当鼠标悬停在“About”列表项目上时，子菜单将显示出来。

  nav ul li:hover > ul {
    display: inherit;
  }
  

  在上面的代码中，我们使用CSS的高级选择器来选取悬停在li元素上的子

  ，并将其display属性设置为inherit，这将把子菜单的display属性值设置为与其父元素相同的值，从而显示出来。
  1. 示例说明

  示例1：

  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li>
        <a href="#">About</a>
        <ul>
          <li><a href="#">Who we are</a></li>
          <li><a href="#">Our team</a></li>
          <li><a href="#">Our offices</a></li>
        </ul>
      </li>
      <li><a href="#">Services</a></li>
      <li>
        <a href="#">Portfolio</a>
        <ul>
          <li><a href="#">Web design</a></li>
          <li><a href="#">Graphic design</a></li>
          <li><a href="#">Print</a></li>
        </ul>
      </li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  

  nav ul ul {
    display: none;
  }
  
  nav ul li:hover > ul {
    display: inherit;
  }
  

  示例2：

  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li>
        <a href="#">Products</a>
        <ul>
          <li><a href="#">Desktops</a></li>
          <li><a href="#">Laptops</a></li>
          <li>
            <a href="#">Accessories</a>
            <ul>
              <li><a href="#">Keyboards</a></li>
              <li><a href="#">Mice</a></li>
              <li><a href="#">Monitors</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Support</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  

  nav ul ul {
    display: none;
  }
  
  nav ul li:hover > ul {
    display: inherit;
  }
  

  通过上面的示例说明，我们可以清楚地了解到如何实现鼠标划过的二级菜单栏。我们需要按照以上的HTML和CSS示例，进行相应的模板填充和样式编写即可。