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

发布时间：2024/01/06

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

构建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”下，我们创建了一个包含历史、团队和办事处的子列表。

编写CSS样式

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

nav ul ul {
  display: none;
}

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

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

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

示例说明

示例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示例，进行相应的模板填充和样式编写即可。

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

相关文章

前端开发最新文章

热门教程