简单的二级菜单导航实现css代码

我来为你详细讲解如何实现简单的二级菜单导航的 CSS 代码。

一、HTML 结构

首先要确定好导航的 HTML 结构。在本次攻略中，我们将使用一个无序列表 <ul> 来构建导航栏。每个一级菜单都是一个 <li> 元素，并包含一个链接，同时如果有子菜单，则需要在该 <li> 元素中嵌套一个新的 <ul> 列表用于展示子菜单。二级菜单也是一个 <li> 元素，同样包含一个链接。例如：

<ul>
  <li><a href="#">首页</a></li>
  <li>
    <a href="#">商品分类</a>
    <ul>
      <li><a href="#">手机配件</a></li>
      <li><a href="#">电子产品</a></li>
    </ul>
  </li>
  <li><a href="#">购物车</a></li>
  <li><a href="#">联系我们</a></li>
</ul>

二、基本样式的实现

接下来，我们需要写基本样式来使导航栏具有基本的展示效果，如字体大小、颜色、边框等等。

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
ul li {
  display: inline-block;
  position: relative;
}
ul li a {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  color: #333;
}
ul li:hover > ul {
  display: block;
}

上面的代码实现了以下几点：

• 清除默认的列表样式；
• 将导航栏的每个元素设置为 inline-block 显示，使其横向排列；
• 给每个一级菜单项设置相对定位；
• 给一级菜单项的链接设置基本样式；
• 当鼠标在一级菜单项上滑过时，隐藏在该菜单项下面的二级菜单将显示。

三、二级菜单的实现

接下来，我们需要实现二级菜单的样式。我们需要将二级菜单隐藏，同时在一级菜单项的 hover 事件上显示出来。

下面的代码添加了对于二级菜单的基本样式。

ul ul {
  display: none;
  position: absolute;
  top: 100%;
  z-index: 1;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  padding: 0;
}
ul ul li {
  display: block;
  position: relative;
}
ul ul li a {
  padding: 10px 15px;
  color: #333;
  text-decoration: none;
  display: block;
}
ul ul li:hover {
  background-color: #fff;
}

上面的代码实现了以下几点：

• 隐藏二级菜单，并将其设置为绝对定位，放在一级菜单项的下面；
• 将二级菜单的背景和边框颜色设置成灰色，实现与一级菜单项的区分；
• 给二级菜单项的链接设置基本样式；
• 当鼠标在二级菜单项上悬停时，背景颜色将变成白色。

四、完整代码

上述代码的完整实现如下：

<ul>
  <li><a href="#">首页</a></li>
  <li>
    <a href="#">商品分类</a>
    <ul>
      <li><a href="#">手机配件</a></li>
      <li><a href="#">电子产品</a></li>
    </ul>
  </li>
  <li><a href="#">购物车</a></li>
  <li><a href="#">联系我们</a></li>
</ul>

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
ul li {
  display: inline-block;
  position: relative;
}
ul li a {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  color: #333;
}
ul li:hover > ul {
  display: block;
}
ul ul {
  display: none;
  position: absolute;
  top: 100%;
  z-index: 1;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  padding: 0;
}
ul ul li {
  display: block;
  position: relative;
}
ul ul li a {
  padding: 10px 15px;
  color: #333;
  text-decoration: none;
  display: block;
}
ul ul li:hover {
  background-color: #fff;
}

五、示例说明

下面给出两个简单的实例：

示例一

<ul>
  <li><a href="#">首页</a></li>
  <li>
    <a href="#">商品分类</a>
    <ul>
      <li><a href="#">手机配件</a></li>
      <li><a href="#">电子产品</a></li>
      <li><a href="#">电脑配件</a></li>
    </ul>
  </li>
  <li><a href="#">购物车</a></li>
  <li><a href="#">联系我们</a></li>
</ul>

示例二

<ul>
  <li><a href="#">首页</a></li>
  <li>
    <a href="#">商品分类</a>
    <ul>
      <li><a href="#">手机配件</a></li>
    </ul>
  </li>
  <li>
    <a href="#">购物车</a>
    <ul>
      <li><a href="#">耳机</a></li>
      <li><a href="#">音箱</a></li>
    </ul>
  </li>
  <li><a href="#">联系我们</a></li>
</ul>

以上就是实现简单的二级菜单导航 CSS 代码的完整攻略。