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;
}

＆＃34;＆GT;＆＃34;只会选择直系孩子。因此，子菜单只会受到其他css悬停的影响。

要修复身高问题，您应该根据需要提供顶级主菜单display:block和固定高度。为了更多的帮助，你最好提供一个小提琴。

设置下拉菜单

1 个答案: