下拉菜单栏问题

Question

请帮助修复此代码。 当我将 cursor 带到父菜单时，整个菜单栏背景正在向下滚动，但显示了我想要的 1 部分。 我只想看到我带来 cursor 的下拉菜单，并且整个菜单栏不能滚动。 当我将 cursor 带到它们上方时，我只想查看 about/CC/team 子菜单的那一部分。

这是 HTML 代码：-

 <html>
   <body>
   <div class="menu-bar">
                     <div class="navigate">
                        <ul class="d-flex flex-column flex-lg-row justify-content-lg-end align-content-center">  

                            <li><a href="#">Home</a></li>

                            <li><a href="#">About</a>
                                        <ul class="dd-menu">
                                            <li><a href="#">link 1</a></li>
                                            <li><a href="#">Link 2</a></li>
                                            <li><a href="#">Link 3</a></li>
                                            <li><a href="#">Link 4</a></li>

                                        </ul>
                                    </li>

                                    <li><a href="#" >CC</a>

                                        <ul class="dd-menu">
                                            <li><a href="">Link 5</a></li>
                                            <li><a href="">Link 6</a></li>
                                            <li><a href="">Link 7</a></li>

                                        </ul>
                                    </li>

                                    <li><a href="#">Team</a>
                                        <ul class="dd-menu">
                                            <li><a href="#">Link 8</a></li>
                                            <li><a href="">Link 9</a></li>
                                            <li><a href="">Link 10</a></li>
                                        </ul>
                                    </li>

                                    <li><a href="#"> Contact</a></li>
                                </ul>



                        </div> 

                    </div>  
   </body>
  </html>

这是 CSS 代码：-

.menu-bar{
background-color:#0000FF;
width:100%;
}

.navigate{

    display:flex;
    flex-wrap:wrap;
    justify-content:end;
    align-items:center;

}


.navigate ul{
    position: relative;
    top:auto;
    z-index:1;
    max-width:100%;
    height: auto;
    padding: 10px 15px;
    margin: 0;
    list-style: none;
    transition:  all 0.5s;
 }


.navigate ul li {
    margin: 0 26px;
}

.navigate ul li a {
    display: block;
    padding: 10px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    text-decoration: none;
    transition: all .5s;
}

.navigate ul li a:hover
{
    background-color:#CC0000;
}

.navigate ul li:hover .dd-menu{
border:0;
display:block;
padding:1px;
background-color:#2c97e4;

}

.navigate ul li:hover .dd-menu ul{
display:block;
}

.navigate ul li:hover .dd-menu ul li{
display:block;
position:absolute;
width:150px;
padding:10px;
border-down:1px dotted #FFFFFF;
text-align:left;
border-radius:0;
}

.navigate ul li:hover .dd-menu ul li a:hover
{
background-color:#CC0000;
}

Answer 1

我猜你正在做一些非常复杂的事情。 您应该使用像 bootstrap 这样的库来轻松设计您的导航栏。 这是适应您的上下文的导航栏的示例

 <html> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> </head> <header> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">My Website...</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> About </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> CC </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Team </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </div> </nav> </header> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> </html>

导航栏具有响应性，因此如果您以较小的 window 尺寸打开它，它会折叠成右侧的按钮。 否则，它会在没有按钮的情况下展开。