List 悬停在链接上

当鼠标悬停在某个项目上时，如何使其边框不会改变

在css中，我不会对边界做任何事情

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

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

您正在使

#子菜单

可见，并且子菜单被包装在

#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;
}

a>标签{
显示：块；
左侧填充：17px；
边缘顶部：5px；
线高：40px；
字体大小：20px；
边框：1px实心#4f5058；
字体系列：Helvetica、Arial、无衬线字体；
字体大小：粗体；
颜色：#F3；
}

---

检查它：

当我将鼠标悬停在一个选项上时，它不再显示可单击的链接尖头手指D:：将

光标：指针

css规则应用于选项。检查更新的小提琴的第72行：