下拉导航 CSS 问题

Question

这个董事会的新手，请多多包涵。

我已经看到很多与我的问题类似的主题，但我仍然找不到解决方案，所以我决定看看我是否可以在这里获得一些帮助。

大部分代码是由其他人完成的——无论如何我都不是编码员/开发人员，所以我基本上是在我有限的知识范围内进行损坏控制。如果您查看 CSS，您会发现这家伙做得很草率。

这是其中一个页面的链接：http://bumbu.com/recipes.php -- 但该问题适用于整个网站。它与导航有关，位于 style.css（第 108-231 行）中（也可能是标题 html）

问题：

1. 有两个下拉菜单 - 一个在“Blend”下，一个在“Cocktails”下，当您将鼠标放在 Blend 下拉菜单上并将鼠标移开时，下拉菜单会出现在屏幕左侧并以某种方式重叠。

2. 整个导航是使用一个非常愚蠢的左边距系统和多个类的填充来定位的，当我更改一件事时，它会弄乱另一件事。您可以看到 Cocktails 上的下拉菜单没有完美地定位到链接和黄色条悬停状态。

3. 还有一些非常愚蠢的断点（大约 1025 像素和 990 像素），您会看到它们也会将下拉菜单弄乱，以至于您甚至无法单击下拉链接。当我给断点添加新的 CSS 时，它会打乱桌面状态，反之亦然。

我尝试过弄乱所有不同的导航并通过反复试验来下拉 CSS，当我把一件事做对时，其他事情就搞砸了。由于该站点对我来说看起来不错，否则我真的不想从头开始重新编写导航的所有代码。任何帮助都会很有用。提前致谢！！如果有更多信息，我可以提供帮助让我知道。

问题截图：

_{（来源：bumbu.com）}

Answer 1

我不知道为什么开发人员使用边距来对齐，这是最糟糕的做法。但这解决了它：

.sub-nav2 {
  transition: opacity 0.4s ease-out;
  position: absolute;
  text-align: left;
  margin-left: -108px; /* Change this here. */
  margin-top: 90px;
}

您可能需要对108px 进行一些调整。我看到的是：

跳过的解决方案

/* Line #185 */
nav ul ul {
  padding-top: 5px;
  margin-top: 85px;
}
/* Line #195 */
.sub-nav2 {
  margin-left: -108px;
  margin-top: 85px;
}