讓我的下拉菜單與jQuery，HTML和CSS一起下降

所以我之前遇到了一個問題 - 我的選項下拉菜單打到頁面的底部，然後不顯示，所以基本上我需要做的就是讓它'drop up'...讓我的下拉菜單與jQuery，HTML和CSS一起下降

它來自一個漫畫網站，但它是託管的，所以在HTML中只有一小部分代碼只在實際網站上工作，所以我想最好是給你鏈接到該頁面，您可以檢查Firefox上的元素或者查看代碼的運行情況。鏈接網站的網頁： http://mytestcomic.thecomicseries.com/comics/1/

有問題的下拉列表是正確的在頁面的底部，名爲「郵報率，保存&加載」。正如你從上面看到的，我剛剛複製了導航按鈕和更高的下拉菜單，以便讀者不必回滾到漫畫的下一頁（我應該添加的只是一個測試所以我可以先把它解決，然後把代碼移到真實的東西上）。

我的jQuery腳本是在這裏：

<script> 
$('.dropcon').hover(
    function() { 
     $('.fallback', this).stop().slideDown(125); 
    }, 
    function() { 
     $('.fallback', this).stop().slideUp(125); 
    } 
); 
</script>

如果你需要我過去的HTML/CSS在這裏和我可以，但我說這可能會更容易讓你看到它youself上頁。

謝謝！

來源

2013-07-17 Slbquista

你只需要一點點額外的CSS使用絕對定位，使其相對於父元素的底部：

.dropcon { 
    position: relative; 
} 
.fallback { 
    position: absolute; 
    bottom: 0; 
}

來源

2013-07-17 11:57:42

非常感謝這個完美的作品！ :) 出於興趣，你會介意更詳細地解釋爲什麼這個工程？再次感謝！ – Slbquista

那麼絕對定位會從文檔流中移除元素，而元素的佈局和定位將與它的偏移父項相關。現在，這是一個垃圾解釋，所以我建議閱讀[HTML5 Rocks的'瀏覽器如何工作']（http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Positioning）文章並至少閱讀[CSS可視化格式模型]（http://www.w3.org/TR/CSS2/visuren.html#positioning-scheme）規範。 –

好的，謝謝我將閱讀這些內容。 :) – Slbquista

讓我的下拉菜單與jQuery，HTML和CSS一起下降

回答

相關問題