下拉導航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;
}