Question

引起问题的原因是当我使窗口的大小变小（恢复）时，class=Menu的第4个子行为不像其他3个div那样，我每个宽度为25％。相反，它水平溢出并越过身体，页眉和页脚。

＆＃13;

/*---------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-----------*/

＆＃13;

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

＆＃13;

我可以看到导致问题的原因是第4个div中的<li>，但我无法弄清楚如何安排它以便它不会溢出。

我已尝试完全删除<li>代码，但这只会导致更多问题。

Answer 1

我不完全确定我理解您要尝试做什么，因此应该采用适当的解决方案，但将overflow: hidden添加到.Main会阻止其内容至少溢出。

需要帮助制作导航栏的下拉菜单部分

1 个答案: