防止内容形式移动

Question

我的代码需要一些帮助。我创建了一个下拉导航菜单。但是当我将鼠标悬停在子菜单上时，它会将我网站的主要内容向下推。我不想要那个。我希望能够在不感染任何主要内容的情况下查看子菜单。如果我悬停菜单，它会将菜单的其他部分向下推。我喜欢这样，但是当我尝试使用绝对位置时，它不再向下移动菜单的其他部分。 （对不起我的英语不好）

部分html代码：

<nav class="navigation">
  <ul class="mainmenu">
    <li><a href="index.htm">Home</a></li>
    <li><a href="">Trajecten</a>
      <ul class="submenu">
        <li><a href="trajecten/Sport.htm">Sport</a></li>
        <li><a href="trajecten/Techniek.htm">Techniek</a></li>
        <li><a href="trajecten/Moderne_Media.htm">Moderne Menia</a></li>
        <li><a href="trajecten/Fast_Lane_English.htm">Fast Lane English</a></li>
      </ul>
    </li>
    <li><a href="">2017/18</a>
      <ul class="submenu">
        <li><a href="2017,18/Examenreis_Berlijn.htm">Examenreis Berlijn</a></li>
        <li><a href="2017,18/Examenreis_Londen.htm">Examenreis Londen</a></li>
        <li><a href="2017,18/Examenreis_Parijs.htm">Examenreis Parijs</a></li>
        <li><a href="2017,18/Introductie.htm">Introductie</a></li>
      </ul>
    </li>
    <li><a href="">2016/17</a>
      <ul class="submenu">
        <li><a href="2016,17/Diploma_uitreiking_Havo.htm">Diploma uitreiking Havo</a></li>
        <li><a href="2016,17/Diploma_uitreiking_Mavo.htm">Diploma uitreiking Mavo</a></li>
        <li><a href="2016,17/Introductie.htm">Introductie</a></li>
        <li><a href="2016,17/Open_Dag.htm">Open Dag</a></li>
      </ul>
    </li>
  </ul>
</nav>

<center>
<p id="content">2017/18</p>
<a href="2017,18/Examenreis_Berlijn.htm"> <img id="picture" src="images/2017,18/Berlijn.jpg"></a>
</center>

CSS代码：

#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><a href="index.htm">Home</a></li>
        <li><a href="">Trajecten</a>
          <ul class="submenu">
            <li><a href="trajecten/Sport.htm">Sport</a></li>
            <li><a href="trajecten/Techniek.htm">Techniek</a></li>
            <li><a href="trajecten/Moderne_Media.htm">Moderne Menia</a></li>
            <li><a href="trajecten/Fast_Lane_English.htm">Fast Lane English</a></li>
          </ul>
        </li>
        <li><a href="">2017/18</a>
          <ul class="submenu">
            <li><a href="2017,18/Examenreis_Berlijn.htm">Examenreis Berlijn</a></li>
            <li><a href="2017,18/Examenreis_Londen.htm">Examenreis Londen</a></li>
            <li><a href="2017,18/Examenreis_Parijs.htm">Examenreis Parijs</a></li>
            <li><a href="2017,18/Introductie.htm">Introductie</a></li>
          </ul>
        </li>
        <li><a href="">2016/17</a>
          <ul class="submenu">
            <li><a href="2016,17/Diploma_uitreiking_Havo.htm">Diploma uitreiking Havo</a></li>
            <li><a href="2016,17/Diploma_uitreiking_Mavo.htm">Diploma uitreiking Mavo</a></li>
            <li><a href="2016,17/Introductie.htm">Introductie</a></li>
            <li><a href="2016,17/Open_Dag.htm">Open Dag</a></li>
          </ul>
        </li>
      </ul>
    </nav>

    <center>
    <p id="content">2017/18</p>
    <a href="2017,18/Examenreis_Berlijn.htm"> <img id="picture" src="images/2017,18/Berlijn.jpg"></a>
    </center>

做了一些改动， 现在它更好地居中 如果你使用js，你可以打开其中一个菜单

Answer 2

试试这个：

CSS

nav, center{
  display: inline-block;
  vertical-align: top;
}

center{
  position: relative;
  top: 100px;
}

注意：<center> 标签在 HTML5 中已过时

DEMO HERE