卑鄙的泡面

纯CSS横向菜单

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

在线演示

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
// 二级菜单
.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

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