title: Prevent content form moving
body: <p>I need some help with my code. I created a drop-down navigation menu. But when I hover over the sub-menus it pushes the main content of my website down. I don't want that. I want to be able to look at the sub-menus without infecting any of my main content. If I hover the menu it is pushing the other parts of the menu down. I like that, but when I tried to use position absolute, it isn't moving the other parts of the menu down anymore.
  (Sorry for my bad English)</p>
  
  <p>A part of the html code:</p>
  
  <pre><code>&lt;nav class="navigation"&gt;
    &lt;ul class="mainmenu"&gt;
      &lt;li&gt;&lt;a href="index.htm"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Trajecten&lt;/a&gt;
        &lt;ul class="submenu"&gt;
          &lt;li&gt;&lt;a href="trajecten/Sport.htm"&gt;Sport&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="trajecten/Techniek.htm"&gt;Techniek&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="trajecten/Moderne_Media.htm"&gt;Moderne Menia&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="trajecten/Fast_Lane_English.htm"&gt;Fast Lane English&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;2017/18&lt;/a&gt;
        &lt;ul class="submenu"&gt;
          &lt;li&gt;&lt;a href="2017,18/Examenreis_Berlijn.htm"&gt;Examenreis Berlijn&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="2017,18/Examenreis_Londen.htm"&gt;Examenreis Londen&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="2017,18/Examenreis_Parijs.htm"&gt;Examenreis Parijs&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="2017,18/Introductie.htm"&gt;Introductie&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;2016/17&lt;/a&gt;
        &lt;ul class="submenu"&gt;
          &lt;li&gt;&lt;a href="2016,17/Diploma_uitreiking_Havo.htm"&gt;Diploma uitreiking Havo&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="2016,17/Diploma_uitreiking_Mavo.htm"&gt;Diploma uitreiking Mavo&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="2016,17/Introductie.htm"&gt;Introductie&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="2016,17/Open_Dag.htm"&gt;Open Dag&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  
  &lt;center&gt;
  &lt;p id="content"&gt;2017/18&lt;/p&gt;
  &lt;a href="2017,18/Examenreis_Berlijn.htm"&gt; &lt;img id="picture" src="images/2017,18/Berlijn.jpg"&gt;&lt;/a&gt;
  &lt;/center&gt;
  </code></pre>
  
  <p>Css code:</p>
  
  <pre><code>#content{
      font-size: 25px;
      position:relative;
      top: 25px;
  }
  #picture{
      width: 285px;
      position:relative;
      top: 30px;
  }
  html, body {
      font-family: Arial, Helvetica, sans-serif;
  }
  /* Navigatie */
  .navigation {
      position: relative;
      top: 100px;
      width: 230px;
  }
  .mainmenu, .submenu {
      list-style: none;
      padding: 0;
      margin: 0;
  }
  .mainmenu a {
      display: block;
      background-color: #CCC;
      text-decoration: none;
      padding: 10px;
      color: #000;
  }
  .mainmenu a:hover {
      background-color: #C5C5C5;
  }
  .mainmenu li:hover .submenu {
      display: block;
      max-height: 420px;
  }
  .submenu a {
      background-color: #999;
      text-align: center;
  }
  .submenu a:hover {
      background-color: #666;
  }
  .submenu {
      overflow: hidden;
      max-height: 0;
      -webkit-transition: all 0.8s ease-out;
  }
  </code></pre>