纯 CSS 横向菜单

纯 CSS 实现的横向菜单，宽度固定，高度模拟撑开父级效果，兼容 IE8

在线演示

通过+选择器控制显示一级菜单

//'全部商品':hover
.all-product:hover + .nav {
  display: block;
}

使用position: absolute;绝对定位使二级菜单与一级菜单顶部对齐，二级菜单添加padding-left为一级菜单留下显示空间

// 二级菜单
.nav ul ul {
  display: none;
  position: absolute;
  left: -5px;
  top: 0;
  width: 440px;
  padding-left: 90px;
  background: #fff;
  z-index: 1;
  border-left: 5px solid #000;
}

同时为它们添加层级（一级菜单position定位），一级菜单选项z-index:2，二级菜单z-index:1

//一级菜单-选项a
.nav > ul > li > a {
  position: relative;
  z-index: 2;
}