設置菜單背景圖像高度

我在Drupal中有一個水平菜單塊，它有一個重複的背景圖像。我正在嘗試爲菜單的子項製作一個下拉菜單。設置菜單背景圖像高度

我遇到的問題是當下拉菜單處於活動狀態時，背景圖像重複顯示整個菜單的寬度和下拉菜單的高度。

我明白爲什麼會發生這種情況，但不能想出解決問題的優雅方法。在按鈕上使用背景圖像應該可以工作，但是背景不會延伸到邊緣。

有沒有辦法限制重複圖像的高度？如果我可以限制高度，我可以將其設置爲父菜單的高度。歡迎任何其他建議。

來源

2013-04-14 Dale

您能否提供具體的代碼，和工作，但在Jsfiddle.net你的問題的簡單的例子？ – bookcasey

當然。現在會這樣做。 – Dale

我有一個部分工作的例子：http://jsfiddle.net/L46rT/26/ 當顯示子菜單時，主項顯然不應該移動。浮動他們左側修復它，但刪除背景圖像。 – Dale

這個怎麼樣？不要擔心我的方法隱藏/顯示菜單（或俗氣的背景）

我添加了一個子菜單的類，只是爲了簡化代碼。

訣竅是指定菜單的height，然後將overflow設置爲可見。

工作代碼在這裏：http://jsfiddle.net/cockypup/Fs3WV/

這是CSS

#blockmenu { 
    background-image:url(http://t1.gstatic.com/images?q=tbn:ANd9GcS3LkgeI7h_C9w5PbHx_mIuVETgzO2NqJJdOSet-va1t6Q8nUAj); 
    height:30px; 
    overflow:visible; 
} 
#blockmenu ul li { 
    display: inline; 
    padding-right: 30px; 
    list-style: none; 
    color:white; 
    position:relative; 
} 

.sub { 
    display: list-item; 
    list-style-type: none; 
    padding-left: 0; 
    display:none; 
    position:absolute; 
    top:50px; 
    width:60px; 
}

來源

2013-04-14 19:06:59 cockypup

Typo：'overflow：show' ==>'overflow：visible' –

@Matt Coughlin：謝謝。固定。有趣的是，它反正工作。我想當你將'overflow'設置爲亂碼時，默認是'visible'。 – cockypup

太棒了，謝謝！ – Dale

您可以使用屬性background-size來指示背景的大小。

查看此頁面爲屬性的完整描述： http://www.css3.info/preview/background-size/

來源

2013-04-14 18:06:43 cockypup

我嘗試過使用它，但是修改了瓷磚的大小而不是瓷磚區域的大小。 – Dale

設置菜單背景圖像高度

回答

相關問題