[分享]css做电商网站二级菜单栏

CSS做电商网站二级菜单栏是一个基本操作。在网站导航栏中经常会出现多级菜单，其中二级菜单栏是非常常见的。下面就来介绍一下如何利用CSS来制作电商网站二级菜单栏。.nav { display: flex...

CSS做电商网站二级菜单栏是一个基本操作。在网站导航栏中经常会出现多级菜单，其中二级菜单栏是非常常见的。下面就来介绍一下如何利用CSS来制作电商网站二级菜单栏。

.nav {
  display: flex; /*设置导航栏为弹性盒子*/
  justify-content: center; /*水平居中*/
  background-color: #f5f5f5;
  height: 50px;
}

.nav ul {
  list-style: none; /*去除默认样式*/
  display: flex; /*设置为弹性盒子*/
  margin: 0;
  padding: 0;
}

.nav ul li {
  position: relative; /*设置li为相对定位，为二级菜单做准备*/
  margin: 0 20px; /*设置li的左右间距*/
  line-height: 50px;
}

.nav ul li a {
  color: #333;
  text-decoration: none;
  padding: 0 10px;
}

/*二级菜单栏*/
.nav ul li ul {
  display: none; /*初始状态下隐藏*/
  position: absolute; /*设置为绝对定位*/
  top: 50px; /*距离上方的距离*/
  left: 0;
  background-color: #fff;
  padding: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .2); /*添加阴影*/
}

.nav ul li:hover ul {
  display: block; /*鼠标悬浮时显示*/
}

.nav ul li ul li {
  width: 200px;
  margin: 0;
}

.nav ul li ul li a {
  color: #666;
  padding: 5px;
} 

以上代码中，我们首先定义了一个导航栏的样式，然后在导航栏中为li添加了一个二级菜单栏。通过设置二级菜单栏的position属性为absolute，让它完全脱离文本流，然后设置top和left属性，将其定位到指定的位置。在鼠标悬浮到一级菜单栏时，我们通过设置:hover伪类以及display属性将二级菜单栏的显示出来。另外，我们还给二级菜单栏添加了一些样式来美化它的外观，如背景色、阴影等。