html - 子菜单标注重叠的 CSS 垂直菜单

Question

已经有一段时间了 - 但我发现自己对 Web 开发有了新的兴趣，我希望你能帮助我克服以下问题:

我在个人网站上工作。内容等都是初步的。我主要关注的是左侧的垂直菜单。虽然我对目前的外观很满意，但仍有一些问题:

1) 我必须将过渡设置为 >0s，这样我在主菜单悬停和子菜单悬停之间有足够的时间。因此，如果我将鼠标悬停在主菜单项之间，它们将因逐步淘汰而短暂重叠。有没有办法解决这个问题？(焦点选择器可能是一个选项，但这需要单击菜单项，我更喜欢悬停)

2) 子菜单与主菜单的顶部对齐。因此，最后一项的子项(测试)超出了页面的边界，在页面下方留有空白。有没有办法让子菜单压在机身边缘上移？我可能可以给它一个不同的标签并以不同的方式设计它，我希望有一个更通用的解决方案。

3) 小问题:从主菜单悬停切换到子菜单悬停时，主图标会非常短暂地“闪烁”。这是正常行为吗？当然不漂亮。

4) 最后但同样重要的是:由于这是我第一次做网站，如果能得到您对代码效率低下的一般反馈，我将非常感激，这样我以后就可以更加精简。

(请参阅下面更新的 fiddle - 删除了完整代码以节省空间。)

感谢您的帮助!

---

编辑感谢您的回答 - 问题 #1 已使用您概述的方法解决!

不过，最后的子菜单还是让我有点头疼。

如果我使用“last-child”选择器和下面添加的代码，它不会改变任何东西。然而，如果我给最后一个“气泡”一个不同的标签，使用完全相同的代码，气泡将对齐到最后一个主菜单项的底部，但包含的 UL 仍然是反抗的。

正如您从原始 CSS 中看到的那样，最后一个“亲戚”是主菜单 IL，那么子菜单和包含的 UL 不应该都与它们各自的父级/祖父级的底部对齐吗？

• 为最后一个 child “bubble_last”使用一个专用的、不同的标签
• 使用最后一个 child 选择器

和随附的新代码(更新了完整代码的 fiddle :这里是 Fiddle ...使用大屏幕查看对齐问题的结果):

.navigation ul li:last-child {
    border: solid orange;
}

.navigation .bubble_last{
    position: absolute;
    margin-top: 0%;
    padding: 0px;
    left: 60px;
    bottom: 0px;
    width: 400px;
    height: 200px;
    border: solid red;
}

.navigation .bubble_last ul{
    position: absolute;
    left: 0;
    bottom: : 0px;
    margin-top: 0px;
    padding: 0px;
    width: 20vw;
    height: 100px;
    font-size: 15px;
    font-size: 1.2vw;
    font-weight: 400;
    border: solid blue;
    margin-left: 28%;
    display: block;

}

.navigation .bubble_last ul li {
    list-style: none;
    background-color: none;
    border-radius: 3px;
    height: 2vw;
    line-height: 1.2vw;
    width: 20vw;
    position: relative; 
    padding-top: 0px;
    margin: 0;
    padding: 0;

}

Answer 1

无需在 .bubble 上添加过渡延迟，您只需要使 .bubble 类足够宽(并从主 li 开始code> 使用 left: 60px) 触发，这样悬停将是连续的:

.navigation .bubble {
  position: absolute;
  margin-top: 0%;
  padding: 0px;
  left: 60px;
  top: 0px;
  width: 200px;
  height: 100%;
  background-color: none;
}

然后只需添加一个 margin-left 到子菜单:

.navigation ul li ul {
  margin-left: 20px;
}

要解决您的第二个问题，只需添加以下 CSS 以使最后一个子菜单相对于导航项的底部定位:

ul li ul.subm:last-child {
  top: auto;
  bottom:0px;
}

更新的演示:JSFiddle