Question

当将鼠标悬停在某个项目上时，我该怎么做才能使边框不会改变？

在CSS中，我对边界没有任何作用，

#ALink:hover #SubMenu {
    display: block;
    position: relative;
    top: 20px;
    left: -18px;
    }

正如您在此JSFiddle中看到的，当您将鼠标悬停在A上时，边框会延伸到子菜单。我怎么能让它不发生？（保持边界不变）

JSFiddle

Answer 1

您正在使#SubMenu可见，而SubMenu包含在#ALink中。当您让孩子看到时，父级会重新调整大小以显示子元素。

一种解决方案可以如下。当然，你需要清理你的CSS并让它再次漂亮：

<a id="ALink" href="#">
  <label>A</label>
  <ul id="SubMenu">
    <li class="items-2">Item 1</li>
    <li class="items-2">Item 2</li>
    <li class="items-2">Item 3</li>
  </ul>
</a>

a > label {
  display: block;
  padding-left: 17px;
  margin-top: 5px;
  line-height: 40px;
  font-size: 20px;
  border: 1px solid #4f5058;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
  color: #f3f3f3;
}

检查出来：http://jsfiddle.net/Zuct2/1/

悬停在链接上

1 个答案: