html - 如何在子菜单出现时向下移动最后一个 div

Question

我修改了以下来自 W3 的代码以使其响应。任何让它更好地受到赞赏的建议。

这里是主要问题:当红色子菜单出现时，如何使最后一个 div(类为“下移”)向下移动页面？

p:empty{
   display:none;
   margin:0;
}

.entry-content p{
  margin:0;
}

.subnavbtn button{
  border:0!important;
  box-sizing:unset!important;
  font-family: "Open Sans", Helvetica, Arial, sans-serif!important;
}

/* The navigation menu */
.navbar {
  overflow: hidden;
  background-color: #333; 
  line-height:1;  
}

.navbar p{
  line-height:1;  
 }


/* Navigation links */
.navbar a {
  float: left;
  font-size: 3vw;
  color: white;
  text-align: center;
  padding: 2vw 1.5vw;
  text-decoration: none;
}

.navbar a:visited{
  color:white;  
}

/* The subnavigation menu */
.subnav {
  float: left;
  overflow: hidden;  
}

.subnav{
  font-size:3vw;
}

/* Subnav button */
.subnav .subnavbtn {
 
  border: none;
  box-sizing:unset!important;
  outline: none;
  color: white;
  padding:  2vw 1.5vw;
  background-color: inherit;
  font:inherit;
  font-family: "Open Sans", Helvetica, Arial, sans-serif!important;  
  margin: 0;
}

/* Add a red background color to navigation links on hover */
.navbar a:hover, .subnav:hover .subnavbtn {
  background-color: red;
}

/* Style the subnav content - positioned absolute */
.subnav-content {
  display: none;
  position: absolute;
  left: 2.5%;
  background-color: red;
  width:  95%;
  z-index: 1;
}

/* Style the subnav links */
.subnav-content a {
  float: left;
  color: white;
  text-decoration: none;
}

/* Add a grey background color on hover */
.subnav-content a:hover {
  background-color: #eee;
  color: black;
}

/* When you move the mouse over the subnav container, open the subnav content */
.subnav:hover .subnav-content {
  display: block;
}

.move-down{
   width:100%;
   height:200px;
   background-color:purple;
}

<div class="entry-content">   
   <!-- The navigation menu -->
   <div class="navbar">
      <a href="#home">Home</a>
      <div class="subnav">
         <button class="subnavbtn">About</button>
         <div class="subnav-content">
            <a href="#company">Company</a>
            <a href="#team">Team</a>
            <a href="#careers">Careers</a>
         </div>
      </div>
      <div class="subnav">
         <button class="subnavbtn">Services</button>
         <div class="subnav-content">
            <a href="#bring">Bring</a>
            <a href="#deliver">Deliver</a>
            <a href="#package">Package</a>
            <a href="#express">Express</a>
         </div>
      </div>
      <div class="subnav">
         <button class="subnavbtn">Partners</button>
         <div class="subnav-content">
            <a href="#link1">Link 1</a>
            <a href="#link2">Link 2</a>
            <a href="#link3">Link 3</a>
            <a href="#link4">Link 4</a>
         </div>
      </div>
      <a href="#contact">Contact</a>
   </div>
</div>
<div class="move-down"></div>

Answer 1

紫色的 div 在导航容器之外，所以你不能使用 grid 或 flexbox 来操作它，你也不能在导航悬停时向下移动它，因为没有选择器来完成这项工作，但是您可以使用一些 javascript 来获得所需的结果:

const navbar = document.getElementsByClassName('navbar')[0]
const subnavs = document.getElementsByClassName('subnav')
const purpleDiv = document.getElementsByClassName('move-down')[0]
const subnavHeight = document.getElementsByClassName('subnav')[1].getBoundingClientRect().height

for ( let i =0 ; i <subnavs.length ; i++ ) {
subnavs[i].addEventListener('mouseover', function() {
  purpleDiv.style.marginTop = subnavHeight + 'px'
  
})
subnavs[i].addEventListener('mouseleave', function() {
  purpleDiv.style.marginTop = 0 + 'px'
})
}

p:empty {
  display: none;
  margin: 0;
}

.entry-content p {
  margin: 0;
}

.subnavbtn button {
  border: 0!important;
  box-sizing: unset!important;
  font-family: "Open Sans", Helvetica, Arial, sans-serif!important;
}


/* The navigation menu */

.navbar {
  overflow: hidden;
  background-color: #333;
  line-height: 1;
}

.navbar p {
  line-height: 1;
}


/* Navigation links */

.navbar a {
  float: left;
  font-size: 3vw;
  color: white;
  text-align: center;
  padding: 2vw 1.5vw;
  text-decoration: none;
}

.navbar a:visited {
  color: white;
}


/* The subnavigation menu */

.subnav {
  float: left;
  overflow: hidden;
}

.subnav {
  font-size: 3vw;
}


/* Subnav button */

.subnav .subnavbtn {
  border: none;
  box-sizing: unset!important;
  outline: none;
  color: white;
  padding: 2vw 1.5vw;
  background-color: inherit;
  font: inherit;
  font-family: "Open Sans", Helvetica, Arial, sans-serif!important;
  margin: 0;
}


/* Add a red background color to navigation links on hover */

.navbar a:hover,
.subnav:hover .subnavbtn {
  background-color: red;
}


/* Style the subnav content - positioned absolute */

.subnav-content {
  display: none;
  position: absolute;
  left: 2.5%;
  background-color: red;
  width: 95%;
  z-index: 1;
}


/* Style the subnav links */

.subnav-content a {
  float: left;
  color: white;
  text-decoration: none;
}


/* Add a grey background color on hover */

.subnav-content a:hover {
  background-color: #eee;
  color: black;
}


/* When you move the mouse over the subnav container, open the subnav content */

.subnav:hover .subnav-content {
  display: block;
}

.move-down {
  width: 100%;
  height: 200px;
  background-color: purple;
}

<div class="entry-content">
  <!-- The navigation menu -->
  <div class="navbar">
    <a href="#home">Home</a>
    <div class="subnav">
      <button class="subnavbtn">About</button>
      <div class="subnav-content">
        <a href="#company">Company</a>
        <a href="#team">Team</a>
        <a href="#careers">Careers</a>
      </div>
    </div>
    <div class="subnav">
      <button class="subnavbtn">Services</button>
      <div class="subnav-content">
        <a href="#bring">Bring</a>
        <a href="#deliver">Deliver</a>
        <a href="#package">Package</a>
        <a href="#express">Express</a>
      </div>
    </div>
    <div class="subnav">
      <button class="subnavbtn">Partners</button>
      <div class="subnav-content">
        <a href="#link1">Link 1</a>
        <a href="#link2">Link 2</a>
        <a href="#link3">Link 3</a>
        <a href="#link4">Link 4</a>
      </div>
    </div>
    <a href="#contact">Contact</a>
  </div>
</div>
<div class="move-down"></div>