隐藏样式，有三种方法
一种是dispplay
第二种是透明度
第三中是 visibility: visible;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>公司网站页面</title> <style> .header{ width: 1180px; margin: 0 auto; height: 90px; border: 1px solid red; display: flex; justify-content: space-between; align-items: center; } .logo{ width: 100px; } .logo img { width: 100px; height: 80px; animation: logoBig 6s linear infinite; } .nav{ flex: 1; display: flex; justify-content: space-between; align-items: center; flex-direction: row; padding: 0 20px; } .item{ position: relative; padding: 20px 10px; } .item:hover .show { background: red; visibility: visible; } .show { visibility: hidden; position: absolute; height: 60px ; width: 100px; top :50px; left: 0; display: flex ; flex-direction: column; justify-items: center; background: #000; color: #FFF; padding: 8px; border-radius: 5px; } .show:hover{ visibility: visible; } .lable{ margin: 2px 0; padding: 3px; } .lable:hover{ color: red; background: yellow; } .tel{ width: 120px; } @keyframes logoBig { 0%{ width: 100px; height: 80px; } 50%{ position: absolute; top :200px; left: 10px; width: 400px; height: 320px; } 100%{ width: 100px; height: 80px; } } </style> </head> <body> <div class="header"> <div class="logo"><img src="https://www1.djicdn.com/dps/f77b1a299ef740568ce7fcbe13990403.jpg" ></div> <div class="nav"> <div class="item">首页</div> <div class="item">关于我们 <div class="show"> <div class="lable">加入我们</div> <div class="lable">公司简介</div> </div> </div> <div class="item">解决方案 <div class="show"> <div class="lable">公司一</div> <div class="lable">案例二</div> </div> </div> <div class="item">荣誉证书 <div class="show"> <div class="lable">全国第一</div> <div class="lable">牛逼哄哄</div> </div> </div> <div class="item">新闻报道</div> <div class="item">留言</div> </div> <div class="tel"> <div>全国电话</div> <div>400-888-8888</div> </div> </div> </body> </html>
页面布局效果
