我希望我从导航栏中的下拉菜单推送它下面的内容

Question

我希望我的下拉菜单position: absolute能够将div#main 136px中的内容向下移动。它使用nav ul li:hover #main {margin-top: 136px;}无效。如果可能，我想通过html / css解决问题！网站：

＆＃13;

＆＃13;

body {
  margin: 0;
  padding: 0;
  background-color: #327ead;
  font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
  color: #c4c4c4;
}
a {
  text-decoration: none;
  color: #c4c4c4;
}
b {
  letter-spacing: 2px;
}
div#head {
  width: 100%;
  background-color: #3c3c3c;
  height: 53px;
}
nav {
  background-color: #3c3c3c;
  width: 930px;
  margin: 0 auto;
}
nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  text-align: left;
  position: relative;
}
nav ul li {
  display: inline-block;
}
nav ul li:hover {
  border-bottom: 4px solid #327ead;
}
nav ul li:hover > ul {
  display: block;
}
nav ul li a:hover {
  color: #327ead;
}
nav ul ul li:hover {
  border-bottom: none;
}
nav ul li a {
  display: block;
  padding: 10px 15px;
  font-size: 25px;
}
nav ul ul {
  display: none;
  position: absolute;
  background-color: #3c3c3c;
  width: 400px;
  height: 136px;
  text-align: left;
}
nav ul ul li {
  display: block;
  font-size: 16px;
  padding: 4px 0 4px 10px;
}
nav ul ul li a {
  font-size: 16px;
  padding: 0;
}
ul.news1 {
  margin: 4px 0 0 0;
}
ul.news2 {
  margin: 4px 0 0 400px;
}
ul.news3 {
  margin: 4px 0 0 800px;
  width: 130px;
}
div#main {
  width: 930px;
  margin-left: auto;
  margin-right: auto;
  color: #c4c4c4;
  text-align: justify;
}
div#mostrecentnews {
  background-color: #3c3c3c;
  margin: 10px 0 10px 0;
  padding: 4px 8px;
}

＆＃13;

<div id="head">
    
    <nav>
    
        <ul>
            <li><a href="#">News</a>
                <ul class="news1">
                    <li><b>Today's News</b></li>
                    <li><a href="#">content...</a></li>
                    <li><a href="#">content...</a></li>
                    <li><a href="#">content...</a></li>
                    <li><a href="#">Browse More...</a></li>
                </ul>
                <ul class="news2">
                    <li><b>Top Weekly News</b></li>
                    <li><a href="#">content...</a></li>
                    <li><a href="#">content...</a></li>
                    <li><a href="#">content...</a></li>
                    <li><a href="#">Browse More...</a></li>
                </ul>
                <ul class="news3">
                    <li><b>History</b></li>
                    <li><a href="#">May</a></li>
                    <li><a href="#">April</a></li>
                    <li><a href="#">March</a></li>
                    <li><a href="#">Browse More...</a></li>
                </ul>
            </li>
       </ul>
      
    </nav>
  
</div>

<div id="main">
        
        <img src="data/RL-Takumi.jpg">
    
        <div id="mostrecentnews">
        
            <b>Welcome to RocketLeague-Data.com!</b><br>
       content...content...content...content...content...content...content...content...content...content...content...
        
        </div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

<强>筛选条件：

使用JQuery：

var down = false;
$('#btn').hover(function () {
  if (down == true) {
    $('#main').css("margin-top", "0");
    down = false;
  } else {
    $('#main').css("margin-top", "136px");
    down = true;
  }
});

FIDDLE