<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.body{
background-color: beige;
opacity: 0.7;
height: 100vh;
background-size: cover;
background-image: url(./img/13.jpg);
}
/* .body::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(204, 204, 204, 0.5);
pointer-events: none;
z-index: -1;
} */
/* 导航 */
.navbar{
height: 40px;
/* background-color: #343536; */
display: flex;
justify-content: space-between;
line-height: 40px;
z-index: 99;
}
.nav2{
margin-right: 20px;
}
/* 无序列表 处理*/
ul li{
list-style-type: none;
}
ul li a{
color: #fff;
text-decoration: none;
}
/* 菜单再次布局 */
.menu{
display: flex;
}
/* 右边的ul */
.nav2 ul li {
font-size: 14px;
width: 100px;
text-align: center;
}
/* 鼠标悬停 */
.nav2 ul li:hover{
display: block;
background-color: #ccc;
}
/* 下拉菜单隐藏 */
.nav2 .submenu{
display: none;
}
.submenu{
background-color: #fff;
}
.submenu li a{
color: #000;
}
/* 悬浮按钮选中显示 */
.menu li:hover .submenu{
display: block;
}
/* 按钮 */
.container {
margin: 20px;
display: flex;
flex-wrap: wrap;
/* justify-content: space-around; */
}
button {
width: 12%;
height: 30px;
background-color: #add8e6;
border: 0;
margin: 10px;
z-index: -1;
}
img{
width: 100px;
height: 20px;
margin: 10px;
}
</style>
</head>
<body>
<div class="body">
<!-- 导航 -->
<div class="navbar">
<div><img src="./img/12.png" alt=""></div>
<div class="nav2">
<ul class="menu">
<li><a href="#">简介</a>
<ul class="submenu">
<li><a href="#">简介12</a></li>
<li><a href="#">简介12</a></li>
<li><a href="#">简介12</a></li>
</ul>
</li>
<li><a href="#">简介</a></li>
<li><a href="#">简介</a></li>
<li><a href="#">简介</a></li>
</ul>
</div>
</div>
<!-- 内容 -->
<div class="container">
<button></button>
</div>
</div>
</body>
</html>
