Question

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

html代码的一部分：

img#fpa-logo {
  bottom: -25px;
  height: 175px;
  margin-left: 12.5%;
  position: absolute;
  width: auto;
}

Css代码：

<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>

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

防止内容形式移动

2 个答案: