Question

我的菜单和菜单项内容如下所示：

单击菜单项时，绿色面板向上滑动并显示文本;菜单项和内容以JavaScript连接。

我想更改某些类以使绿色面板显示低于菜单项。

.menu ul {
  float: right;
}

.menu ul li {
  background: #161616;
  list-style-type: none;
  display: inline-block;
  margin: auto;
  color: #f7f7f7;
  padding: 5px 5px 5px 5px;
  font-family: 'Dosis', sans-serif;
  cursor: pointer;
}

.menu ul li:not(.active):before {
  content: "";
  display: block;
  width: 0%;
  color: #f7f7f7;
  border-top: 1px solid transparent;
  border-image-slice: 1;
  transition: width .3s ease-in-out 0s;
  margin-bottom: 5px;
}

.menu ul li:not(.active):focus:before,
.menu ul li:not(.active):hover:before {
  color: #f7f7f7;
  border-top: 1px solid transparent;
  border-image: linear-gradient(to right, #529ecc, #9CF5A6);
  border-image-slice: 1;
  width: 100%;
}

.menu .panel {
  display: none;
  background: #33b1a2;
  padding: 30px;
  width: 50%;
}

.menu .panel.active {
  display: block;
  width: 50%;
}

.active {
  color: #f7f7f7;
  border-top: 1px solid transparent;
  border-image: linear-gradient(to right, #529ecc, #9CF5A6);
  border-image-slice: 1;
  margin-bottom: 5px;
}

<div class="menu">
  <ul class="main">
    <li rel="onas" class="active">
      O NAS
    </li>
    <li rel="zajmujemysie">
      ZAJMUJEMY SIĘ
    </li>
    <li rel="oferta">
      OFERTA
    </li>
  </ul>

  <div id="onas" class="panel active">
    O NAS - ...
  </div>
  <div id="zajmujemysie" class="panel">
    ZAJMUJEMY SIĘ - ...
  </div>
  <div id="oferta" class="panel">
    OFERTA - ...
  </div>
</div>

我改变哪个班级无关紧要，绿色面板和菜单项始终显示在同一行。

Answer 1

将clear: both添加到ID为＆＃39; on＆＃39;

的div中

#onas {
  clear: both;
}

这会清除浮动并确保将onas div放在菜单下方。

我应该更改哪个类以使菜单边距与菜单项中的文本不同

1 个答案: