html - 需要帮助使下拉菜单成为导航栏的一部分

Question

导致问题的原因是，当我缩小窗口的尺寸(向下恢复)时，class=Menu 的第 4 个子分区不像其他 3 个 div，我给每个 25% 的宽度。相反，它会水平溢出并越过正文、页眉和页脚。

/*---------Dropdown----------*/
.Menu, .Menu ul {
padding: 0;
margin: 0;
list-style: none;
  width:25%;

  }

  .Menu li {                      
width: 14.84em;
  }

  .Menu li ul {                   /*Hides dropdown*/
position: absolute;
left: -999em;
  }

  .Menu li:hover ul {             /*Makes the dropdown show on hover*/
left: auto;
  }

  .Menu a {                       /*Styles the links on menubar */
  color: black;
  text-decoration: none;
  display: block;
  }

  .Menu a:hover {                 /*background color of links change on 
  hover*/
  background-color:  #dcefdc;
  }

  .Menu div a{
  padding-top:11px;
  }

  .Menu div a:hover{
   height:50px;
  }

  .liwidth{
  float:left;
  background-color:#4CAF50 ;
  height:50px;
  }
  /*----------Dropdown ends-----------*/

 <div id="DivMenu">
    <div class="Menu"><a style="text-decoration:none;"  href="index.html">HomePage</a></div>

    <div class="Menu"><a style="text-decoration:none;" href="About.html">About</a></div>

    <div class="Menu"><a style="text-decoration:none;" href="Survey.html">Take our survey  </a></div>

    <div class="Menu">
        <li>
            <a href="#">Login/Register</a>
            <ul>
                <div>
                    <li class="liwidth">
                        <a class="linkvalign" href="Login.html">Login</a>
                    </li>
                    <li class="liwidth" >
                        <a class="linkvalign" href="Register.html">Register</a>
                    </li>
                </div>
            </ul>
        </li>
    </div>
</div>

我可以看到导致问题的是 <li>在第 4 个 div 中，但我不知道如何安排它才不会溢出。

我试过删除 <li>标签，但这只会导致更多问题。

Answer 1

我不完全确定我理解你正在尝试做什么，因此正确的解决方案应该是什么，但是将 overflow: hidden 添加到 .Main至少会防止其内容溢出。