为什么当我鼠标移入到nav导航栏里的
- 测试这个标签时，显示的下拉框显示后当我把鼠标移入到显示框里面的时候它有时会不显示，反复这样几次它又会显示，谁能告诉我一下，小妹在此感激不尽！🥹
* { margin: 0px; padding: 0px; } a { text-decoration: none; color: #cbcccb; font-size: 10px; } li { list-style: none; } nav { width: 100%; background-color: #545652; position: relative; height: 26px; display: flex; align-items: center; } nav > ul > li { float: left; margin: 5px; } nav > ul { margin-left: 10px; } nav > ul > li > a:hover { color: wheat; } .right { position: absolute; display: flex; align-items: center; height: 26px; margin-left: 87%; } .right > li { float: left; margin: 5px; } .right > li > a:hover { color: wheat; } /* 设置下拉框的一个样式 */ .down { width: 249px; height: 400px; background-color: rgb(204, 204, 204, 0.5); position: absolute; border: 1px solid #ffffff; display: none; box-shadow: 0 0 10px rgb(0, 0, 0, 0.3); margin-left: -80%; margin-top: 2px; text-align: center; z-index: 999; } .down > p { text-align: center; display: inline-block; line-height: 200px; font-size: 30px; font-weight: bold; font-family: "微软雅黑"; } /* 给下拉框设置一个hover使它鼠标移入时能够显示 */ .right > li:hover .down { display: block; } .clearfix::before, .clearfix::after { display: table; content: ""; clear: both; }<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <nav> <ul class="clearfix"> <li><a href="#">首页</a></li> <li><a href="#">读书</a></li> <li><a href="#">电影</a></li> <li><a href="#">音乐</a></li> <li><a href="#">同城</a></li> <li><a href="#">小组</a></li> <li><a href="#">阅读</a></li> <li><a href="#">FM</a></li> <li><a href="#">时间</a></li> <li><a href="#">其他</a></li> </ul> <div class="right"> <li><a href="#">测试</a> <div class="down"> <p>text</p><br /> <p>test</p> </div> </li> <li><a href="#">登录/注册</a></li> </div> </nav> </body> </html>
