为什么悬停（hover）不起作用，样式不显示？-PHP中文网问答

我正在设计导航条，但是我的鼠标悬停不起作用。当我悬停在“man”项目在我的下拉菜单，它的悬停样式，不工作，不显示样式在检查。有什么问题吗?这是我的HTML代码:

/* Navbar container */
 body {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 li {
     text-decoration: none;
 }

 .nav-container {
     direction: rtl;
     text-align: right
 }

 .navbar {
     overflow: hidden;
     background-color: #333;
     font-family: Arial;
 }

 /* Links inside the navbar */
 .navbar a {
     float: right;
     font-size: 16px;
     color: white;
     text-align: center;
     padding: 14px 16px;
     text-decoration: none;
 }

 /* The dropdown container */
 .dropdown {
     float: right;
     overflow: hidden;
 }

 /* Dropdown button */
 .dropdown .dropbtn {
     font-size: 16px;
     border: none;
     outline: none;
     color: white;
     padding: 14px 16px;
     background-color: inherit;
     font: inherit;
     /* Important for vertical align on mobile phones */
     margin: 0;
     /* Important for vertical align on mobile phones */
 }


 /* Dropdown content (hidden by default) */
 .dropdown-content {
     display: none;
     position: absolute;
     background-color: #f9f9f9;
     width: 100%;
     left: 0;
     box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
     z-index: 1;
 }

 .dropdown:hover .dropdown-content {
    display: block;
  }

.megamenu-container {
    background-color: aqua;
    width: 100%;
}

.megmenu {
    width: 100%;
}

.megamenu-title {
    width: 20%;
    background-color: blue;
    display: inline-block;
    padding: 5px 15px;
    vertical-align: top;
}

.megamenu-subitems-default {
    width: 70%;
    background-color: blueviolet;
    display: inline-block;
    padding: 15px;
}

.megamenu-item {
    float: unset !important;
    padding: 0 !important;
}

.man:hover .megamenu-subitems-default {
    visibility: hidden;
}

#subitems {
    display: inline-block;
    visibility: hidden;
    background-color: yellowgreen;
    width: 70%;
}

.man:hover #subitems {
    visibility: visible;    
}

.test {
    color: yellow;
}

.man:hover .test {
    color: wheat;
}

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="./megamenu.css">
      <title>Document</title>
  </head>

  <body>
      <div class="nav-container">
          <div class="navbar">
              <a href="#home">Home</a>
              <a href="#news">News</a>
              <div class="dropdown">
                  <button class="dropbtn">Dropdown
                      <i class="fa fa-caret-down"></i>
                  </button>
                  <div class="dropdown-content">
                      <div class="megamenu-container">
                          <div class="megmenu">
                              <div class="megamenu-title">
                                  <ul>
                                      <li >
                                          <div class="man">
                                          <a class="megamenu-item" href="#">man</a>
                                          </div>
                                      </li>
                                      <li id="woman">
                                          <a class="megamenu-item" href="#">woman</a>
                                      </li>
                                      <li id="kid">
                                          <a class="megamenu-item" href="#">kid</a>
                                      </li>
                                  </ul>
                              </div>
                              <div class="megamenu-subitems-default">
                                  <p>hello-default</p>
                              </div>
                              <div class="megamenu-subitems-test" id="subitems">
                                  <p>hello-1</p>
                              </div>
                              <div class="megamenu-subitems">
                                  <p>hello-2</p>
                              </div>
                              <div class="megamenu-subitems">
                                  <p>hello-3</p>
                              </div>
                              <div class="megamenu-subitems">
                                  <p>hello-4</p>
                              </div>
                          </div>
                      </div>
                      <p class="test">test</p>
                  </div>
              </div>
          </div>
      </div>
  </body>
</html>

当我悬停在“man”项目在我的下拉菜单，它的悬停样式不工作，不显示样式在Inspect