导航栏小案例
实现类似于这样的效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航栏</title>
<style>
*{
margin: 0;
padding: 0;
}
.div1{
width: 100%;
height: 60px;
/* border: 1px solid blue; */
background-color:rgb(255, 182, 193);
}
.div12{
text-align: center;
}
.div2{
width: 100px;
height: 60px;
/* border: 1px solid red; */
display: inline-block;
text-align: center;
line-height: 60px;
position: relative;
}
.div2_menu{
width: 100px;
height: 200px;
background-color:rgb(255, 200, 127);
display: none;
position: absolute;
}
.div2_menu>div{
text-align: center;
height: 50px;
}
.div2:hover>.div2_menu{
display: block;
}
</style>
</head>
<body>
<div class="div1">
<div class="div12">
<div class="div2">游戏1
<div class="div2_menu">
<div>游戏下载</div>
<div>游戏交易</div>
<div>游戏外挂</div>
<div>游戏攻略</div>
</div>
</div>
<div class="div2">游戏2
<div class="div2_menu">
<div>游戏下载</div>
<div>游戏交易</div>
<div>游戏外挂</div>
<div>游戏攻略</div>
</div>
</div>
<div class="div2">游戏3
<div class="div2_menu">
<div>游戏下载</div>
<div>游戏交易</div>
<div>游戏外挂</div>
<div>游戏攻略</div>
</div>
</div>
<div class="div2">游戏4
<div class="div2_menu">
<div>游戏下载</div>
<div>游戏交易</div>
<div>游戏外挂</div>
<div>游戏攻略</div>
</div>
</div>
<div class="div2">游戏5
<div class="div2_menu">
<div>游戏下载</div>
<div>游戏交易</div>
<div>游戏外挂</div>
<div>游戏攻略</div>
</div>
</div>
<div class="div2">游戏6
<div class="div2_menu">
<div>游戏下载</div>
<div>游戏交易</div>
<div>游戏外挂</div>
<div>游戏攻略</div>
</div>
</div>
<div class="div2">游戏7
<div class="div2_menu">
<div>游戏下载</div>
<div>游戏交易</div>
<div>游戏外挂</div>
<div>游戏攻略</div>
</div>
</div>
</div>
</div>
</body>
</html>实现效果
