html - 设置下拉菜单

Question

我制作了一个下拉菜单，但出现了一些样式问题。我的下拉菜单代码是

       <ul class="dd">
       <li><a href="main.php" >Home</a>
       </li>
       <li><a href="' . $user . '">Profile</a>
       </li>
       <li><a href="my_messages.php">Inbox' . $unread_numrows . '</a>
       </li> 
       <li><a href="#">Management</a>
       <ul>
       <li><a href="account_settings.php">Settings</a>
       </li>
       <li><a href="logout.php">Logout</a>
       </li>
      </ul>
      </li>
      </ul>';

CSS

@media screen and (max-width: 1280px) {
       .dd {
         background-color:#BF3B3D;
         position: absolute;
         right:0px;
         top:0;
         margin-right: 4%;
       }  
       }

        @media screen and (min-width: 1280px) {
        .dd {
          background-color:#BF3B3D;
          position: absolute;
          right:0px;
          top:0;
          margin-right: 10%;
       }  
       }
        @media screen and (min-width: 1920px) {
        .dd {
          background-color:#BF3B3D;
          position: absolute;
          right:0px;
          top:0;
          margin-right: 25%;
        }
        }
         .dd li {
          border-radius: 4px;
          background-color: #BF3B3D;
          float: left;
          position: relative;
          list-style: none;
          top:8px;
          padding: 10px 5px 10px 5px;
         }
          .dd li:hover{
           background-color: #7A0709;
         }
          .dd li a{
            font-size: 14px;
            color:#ffffff;
            text-decoration: none;
            background-color: #BF3B3D;
          }
           .dd li ul li{
            top: 14px; 
            border-radius: 4px;
          }
          .dd li:hover ul{
            background-color: #BF3B3D;
          }
           .dd li:hover a{
            background-color: #7A0709;
          }
          .dd li:hover li a{
             background-color:#BF3B3D;
          }
           .dd li ul{
            display: none;
          }
           .dd li:hover ul {
            display: block; 
            position: absolute;
          }
           .dd li:hover li {
            float: none;
          }
           .dd li ul li:hover a{
            background-color: #7A0709;
          }

现在，当我将鼠标悬停在菜单上时，它的颜色会发生变化，子菜单也会发生变化，但是当子菜单在菜单下打开时，该菜单的颜色也会发生变化，尽管我正在滚动子菜单，所以当滚动子菜单时 -菜单 我只想更改子菜单的颜色，菜单应该恢复为它的颜色。此外，它们似乎是子菜单和菜单之间的一些空间，占用了菜单内的一些空间，我想摆脱那个空间。

Answer 1

要修复悬停效果问题，请使用主菜单悬停 CSS 的直接子选择器。像这样。

.dd > li:hover{
           background-color: #7A0709;
}

">"只会选择直接的 child 。所以在子菜单上只会受到其他 css 悬停的影响。

要解决高度问题，您应该根据需要提供顶部主菜单 display:block 和固定高度。为了提供更多帮助，您最好提供一个 fiddle 。