Prevent content form moving - html

Question

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)
A part of the html code:
<nav class="navigation">
<ul class="mainmenu">
<li>Home</li>
<li>Trajecten
<ul class="submenu">
<li>Sport</li>
<li>Techniek</li>
<li>Moderne Menia</li>
<li>Fast Lane English</li>
</ul>
</li>
<li>2017/18
<ul class="submenu">
<li>Examenreis Berlijn</li>
<li>Examenreis Londen</li>
<li>Examenreis Parijs</li>
<li>Introductie</li>
</ul>
</li>
<li>2016/17
<ul class="submenu">
<li>Diploma uitreiking Havo</li>
<li>Diploma uitreiking Mavo</li>
<li>Introductie</li>
<li>Open Dag</li>
</ul>
</li>
</ul>
</nav>
<center>
<p id="content">2017/18</p>
<img id="picture" src="images/2017,18/Berlijn.jpg">
</center>
Css 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;
}

Answer 1

body{
display:flex;
flex-direction:row;
}
#content{
font-size: 25px;
}
#picture{
width: 285px;
}
html, body {
font-family: Arial, Helvetica, sans-serif;
}
/* Navigatie */
.navigation {
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;
}
center{
width:calc(100% - 230px);
display:flex;
flex-grow:1;
text-align:center;
flex-direction:column;
align-items: center;
}
<nav class="navigation">
<ul class="mainmenu">
<li>Home</li>
<li>Trajecten
<ul class="submenu">
<li>Sport</li>
<li>Techniek</li>
<li>Moderne Menia</li>
<li>Fast Lane English</li>
</ul>
</li>
<li>2017/18
<ul class="submenu">
<li>Examenreis Berlijn</li>
<li>Examenreis Londen</li>
<li>Examenreis Parijs</li>
<li>Introductie</li>
</ul>
</li>
<li>2016/17
<ul class="submenu">
<li>Diploma uitreiking Havo</li>
<li>Diploma uitreiking Mavo</li>
<li>Introductie</li>
<li>Open Dag</li>
</ul>
</li>
</ul>
</nav>
<center>
<p id="content">2017/18</p>
<img id="picture" src="images/2017,18/Berlijn.jpg">
</center>
made a few changes,
now it's better centerd
you can make one of the menus open if you use js

Answer 2

Try this:
CSS
nav, center{
display: inline-block;
vertical-align: top;
}
center{
position: relative;
top: 100px;
}
Note: <center> tag is obsolete in HTML5
DEMO HERE