Question

我有一个这样的菜单：

<div class="menu">
  <div class="menu__item">
    <ul class="menu__item__link">
      <li>menu 1</li>
      <li>menu 2</li>
    </ul>
     <ul class="menu__item__links">
      <li>sub menu 1</li>
      <li>sub menu 2</li>
      <li>sub menu 3</li>
      <li>sub menu 4</li>
    </ul>
  </div>
   <div class="menu__item">
    <ul class="menu__item__link">
      <li>menu 1</li>
      <li>menu 2</li>
    </ul>
     <ul class="menu__item__links">
      <li>sub menu 1</li>
      <li>sub menu 2</li>
      <li>sub menu 3</li>
      <li>sub menu 4</li>
    </ul>
  </div>
   <div class="menu__item">
    <ul class="menu__item__link">
      <li>menu 1</li>
      <li>menu 2</li>
    </ul>
     <ul class="menu__item__links">
      <li>sub menu 1</li>
      <li>sub menu 2</li>
      <li>sub menu 3</li>
      <li>sub menu 4</li>
    </ul>
  </div>
</div>
<h2>Some text here</h2>

https://jsfiddle.net/takebyfy/

当我转换时：缩放我的菜单项 h2 a底部向右移动。我有一些这个菜单的页面，我不想在菜单底部移动元素。当菜单缩放时，它必须将元素悬停在底部。

Answer 1

问题在于您使用HTML进行编码的方式。对于你想要做的事情，这有点不同寻常。

您需要为目标元素设置相对/绝对位置。如下所示，它并不完美，但会引导您朝着正确的方向前进。

.menu__item { background-color: #fff; width: 30%; float: left; margin-left: 5px; position: relative; } .menu__item:hover { transition: all .2s ease-in-out; transform: scale(1.2); } .menu__item:hover .menu__item__links { display: block; } .menu__item__link { list-style-type: none; } .menu__item__links { display: none; position: absolute; background: #fff; width: auto; }

Answer 2

首先，为了良好的练习，请清除你的花车：

.menu:after {
  content:"";
  display:table;
  clear:both;
}

然后，对于您的问题，您可以有两个选择：

固定高度::

如果您可以知道menu_item的大小，可以将其设置为阻止内容偏移的最大高度：

＆＃13;

body {
  background:#ccc;
}
.menu:after {
  content:"";
  display:table;
  clear:both;
}
.menu__item {
  background-color: #fff;
  width: 30%;
  float: left;
  margin-left: 5px;
  height:70px;
}
.menu__item:hover {
  transition: all .2s ease-in-out;
  transform: scale(1.2);
}
.menu__item:hover .menu__item__links {
  display: block;
  background:white;
}
.menu__item__link {
   list-style-type: none;
}
.menu__item__links {
  display: none;
}

＆＃13;

<div class="menu">
  <div class="menu__item">
    <ul class="menu__item__link">
      <li>menu 1</li>
      <li>menu 2</li>
    </ul>
     <ul class="menu__item__links">
      <li>sub menu 1</li>
      <li>sub menu 2</li>
      <li>sub menu 3</li>
      <li>sub menu 4</li>
    </ul>
  </div>
   <div class="menu__item">
    <ul class="menu__item__link">
      <li>menu 1</li>
      <li>menu 2</li>
    </ul>
     <ul class="menu__item__links">
      <li>sub menu 1</li>
      <li>sub menu 2</li>
      <li>sub menu 3</li>
      <li>sub menu 4</li>
    </ul>
  </div>
   <div class="menu__item">
    <ul class="menu__item__link">
      <li>menu 1</li>
      <li>menu 2</li>
    </ul>
     <ul class="menu__item__links">
      <li>sub menu 1</li>
      <li>sub menu 2</li>
      <li>sub menu 3</li>
      <li>sub menu 4</li>
    </ul>
  </div>
</div>
<h2>Some text here</h2>

＆＃13;

绝对位置

为了防止增加菜单项的大小，因此防止下面内容的偏移，使用子项菜单的绝对位置：

＆＃13;

body {
  background:#ccc;
}
.menu:after {
  content:"";
  display:table;
  clear:both;
}
.menu__item {
  background-color: #fff;
  width: 30%;
  float: left;
  margin-left: 5px;
  position:relative;
}
.menu__item:hover {
  transition: all .2s ease-in-out;
  transform: scale(1.2);
}
.menu__item:hover .menu__item__links {
  display: block;
  background:white;
}
.menu__item__link {
   list-style-type: none;
}
.menu__item__links {
  display: none;
  position:absolute;
  left:0;
  width:100%;
  top:100%;
  background:white;
  padding:0 20px;
  box-sizing:border-box;
  margin:0;
}

＆＃13;

<div class="menu">
  <div class="menu__item">
    <ul class="menu__item__link">
      <li>menu 1</li>
      <li>menu 2</li>
    </ul>
     <ul class="menu__item__links">
      <li>sub menu 1</li>
      <li>sub menu 2</li>
      <li>sub menu 3</li>
      <li>sub menu 4</li>
    </ul>
  </div>
   <div class="menu__item">
    <ul class="menu__item__link">
      <li>menu 1</li>
      <li>menu 2</li>
    </ul>
     <ul class="menu__item__links">
      <li>sub menu 1</li>
      <li>sub menu 2</li>
      <li>sub menu 3</li>
      <li>sub menu 4</li>
    </ul>
  </div>
   <div class="menu__item">
    <ul class="menu__item__link">
      <li>menu 1</li>
      <li>menu 2</li>
    </ul>
     <ul class="menu__item__links">
      <li>sub menu 1</li>
      <li>sub menu 2</li>
      <li>sub menu 3</li>
      <li>sub menu 4</li>
    </ul>
  </div>
</div>
<h2>Some text here</h2>

＆＃13;

Answer 3

如果要在页面上设置元素，则需要在元素上添加“位置”。完成之后，在它们上设置z-index（根据您想要查看的内容，它从最高到最低）。对于这个例子，我只是添加这个CSS来实现这一点。

 h2 { position: absolute; left: 10px; top: 60px; z-index: 0;} 
 .menu { position: relative; z-index: 10; }

https://jsfiddle.net/takebyfy/1/

当我转换时，我遇到了一个小问题：扩展我的菜单项

3 个答案: