实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="1.css" />
</head>
<body>
<section class="content">
<!-- 有菜单 -->
<div class="items">
<div class="menu">
<span>手机</span>
<div class="drop">
<div class="drop1">Xiaomi MIX系列</div>
<div class="drop2">Xiaomi 数字系列</div>
<div class="drop3">Xiaomi Civi系列</div>
<div class="drop1">Redmi K系列</div>
<div class="drop2">Redmi Note系列</div>
<div class="drop3">Redmi 数字系列</div>
</div>
</div>
</div>
<!-- END -->
<!-- 无下级 -->
<div class="items">
<div class="menu">
<span>电视</span>
<div></div>
</div>
</div>
<div class="items">
<div class="menu">
<span>家电</span>
<div></div>
</div>
</div>
<div class="items">
<div class="menu">
<span>笔记本</span>
<div></div>
</div>
</div>
<div class="items">
<div class="menu">
<span>出行 穿戴</span>
<div></div>
</div>
</div>
<div class="items">
<div class="menu">
<span>耳机 音箱</span>
<div></div>
</div>
</div>
<div class="items">
<div class="menu">
<span>健康 儿童</span>
<div></div>
</div>
</div>
<div class="items">
<div class="menu">
<span>生活 箱包</span>
<div></div>
</div>
</div>
<div class="items">
<div class="menu">
<span>智能路由器</span>
<div></div>
</div>
</div>
<div class="items">
<div class="menu">
<span>电源 配件</span>
<div></div>
</div>
</div>
<!-- END -->
</section>
</body>
</html>
.content {
display: flex;
flex-direction: column;
}
.items {
width: 130px;
color: white
}
.menu{
width: 100%;
height: 45px;
background: silver;
line-height: 45px;
text-align: center;
position: relative;
overflow: hidden;
}
.menu:hover{
overflow: visible;
background: orangered;
color: white;
z-index: 999;
cursor: pointer;
}
.drop{
background: white;
text-align: center;
width: 100%;
height: 45x;
line-height: 45px;
overflow: hidden;
position: absolute;
top: 0;
left: 100%;
color: black;
}
.drop:hover{
background:white;
cursor: pointer;
}
.drop1:hover{
background: white;
text-align: center;
color: orange
}
.drop2:hover{
background: white;
text-align: center;
color: orange
}
.drop3:hover{
background: white;
text-align: center;
color: orange
}
运行结果
鼠标悬停效果图
鼠标悬停子菜单效果图