Question

＆＃13;

#mainMenu {
  float: right;
  margin-top: 70px;
  padding: 0;
  list-style: none;
  // position: relative;

}
#mainMenu li {
  box-sizing: border-box;
  width: 250px;
  height: 70px;
  background-color: rgba(0, 168, 107, 1);
  border: rgba(76, 76, 76, 0.2) 1px solid;
}
#mainMenu li:hover {
  background-color: rgb(2, 100, 59);
  margin-right: 50px;
}

＆＃13;

<ul id="mainMenu">
  <li value="1"></li>
  <li val="2"></li>
  <li val="3"></li>
  <li val="4"></li>
  <li val="5"></li>
  <li val="6"></li>
</ul>

＆＃13;

正如您所看到的，我希望菜单项在悬停时变宽，但确实如此，但问题是它在右侧变宽，所有其他菜单项向左移动。我只希望悬停的物品更宽，向左移动而其他物品保持静止。

我可以尝试使用JavaScript稍后执行此操作以进行慢速打开。目前我正在尝试将css悬停，因为它的测试速度更快。

Answer 1

查看实时演示http://jsfiddle.net/d4zow6px/

这完成了这项工作，

#mainMenu li:hover{
  background-color: rgb(2,100,59);
  width: 300px;
  margin-left: -50px;
}

更改右侧浮动的垂直菜单项的宽度

1 个答案: