CSS：標題覆蓋導航菜單，打破懸停效果

我目前正在研究這個網站，並剛剛注意到div＃的問題，它覆蓋了菜單，因此只能在文本下方懸停鏈接。有沒有人有任何想法如何解決這個問題？ http://gridironstuds.com/CSS：標題覆蓋導航菜單，打破懸停效果

2011-05-15 Josh Bedo

我在Google的開發工具中看不到'a：hover'定義 – Pwnna 2011-05-15 02:32:18

只是關於您鏈接頁面的一個提示：我個人非常不喜歡嵌入YouTube視頻並開始自動播放的頁面。也許讓我們按自己的戲？ :) – Nathan 2011-05-15 02:40:39

@ultimatebuster這不是問題。 div＃top覆蓋了導航欄的一部分。我建議嘗試使用徽標圖像上的CSS屬性float，以便div＃top不那麼大。 – 2011-05-15 02:41:15

我使用Chrome檢查，只是改變了這種

div#top {position:absolute;}

到

div#top {position:static;}

，並固定權利了。問題是，爲什麼你的頭銜在體內？它應該在你的html的頭部。

2011-05-15 06:10:07 robx

哇，永遠不會知道這將工作，我認爲靜態會讓它保持在頂部，當你滾動。感謝迄今爲止我的工作尚未在所有瀏覽器中進行測試 – 2011-05-15 17:59:08

您已經確定了問題：div#top覆蓋了菜單。要解決這個問題，請縮短元素：將它的height屬性更改爲更小的值（看起來像88px是完美的）。

請嘗試與<div id="top" class="centerContainer" style="height:88px;">的頁面。
如果看起來不錯，請將其添加到您的master.css中的div#top規則中。

2011-05-15 02:37:41 Nathan

唯一的問題是它削減的標誌圖像，我需要它重疊菜單。 – 2011-05-15 03:14:49

@josh然後你必須浮動圖像並使用邊距來定位它，或者使用一些div和z-index。 – Nathan 2011-05-15 04:00:57

指定div的高度＃top {height：100px;}並縮小logo圖片的大小。

2011-05-15 03:57:56 Anish

-2

您可以嘗試使用z-index將菜單置於標題圖像上方。然後，菜單的背景可能是透明的，以便它在之後仍然可見。

2011-05-15 04:13:21 tlunter

但問題是，當你懸停在菜單上，它不顯示鏈接。標題Div是重疊的。如果你把z-index，問題保持不變。 – Anish 2011-05-15 04:25:49

我現在注意到了。我正在計算Z-index能夠將菜單div放在圖像上方，但它似乎不像錨點那樣工作。指定高度爲100px的作品。 – tlunter 2011-05-15 04:27:55

回答