下拉菜單不應該是透明的

我有一個簡單的下拉菜單。當我在菜單下添加其他元素（例如文本）時，即使下拉菜單被操作，它們仍然可見。下拉菜單以某種方式與其下的內容合併，導致疊加的內容難看。下拉菜單不應該是透明的

這裏是我的CSS：

ul#menu, ul#menu ul{ 
    margin: 0px; 
    padding: 0px; 
} 

ul#menu li{ 
    width: 160px; 
    margin: 4px 0px 0px 4px; 
    padding: 5px; 
    list-style: none; 
    position: relative; 
    float: left; 
    background: #eef; 
    border: #bbf solid 1px; 
} 

ul#menu li ul li{ 
    width: auto; 
    margin: 4px 0px 0px 0px; 
    float:none; 
    display: none; 
    background: #ddf; 
    border: #bbf solid 1px; 
} 

ul#menu li:hover ul li{ 
    display: block; 
} 

ul#menu li:hover{ 
    background: #ddf; 
} 

ul#menu li ul li:hover{ 
    background: #ccf; 
} 

ul#menu li img{ 
    margin-right: 10px; 
}

這裏是我的html：

<ul id="menu"> 
    <li> 
     <span><img src="images/logos/file_small.png"><a href="#">Bilan</a></span> 
     <ul> 
      <li id="creer"><img src="images/logos/add_small.png"><a href="#">Créer</a></li> 
      <li id="consulter"><img src="images/logos/other_small.png"><a href="#">Consulter/Modifier</a></li> 
     </ul> 
    </li> 
    <li> 
     <span><img src="images/logos/chartbar_small.png"><a href="#">Extract</a></span> 
     <ul> 
      <li><img src="images/logos/pdf_small.png"><a href="#">Pdf</a></li> 
      <li><img src="images/logos/xls_small.png"><a href="#">Excel</a></li> 
     </ul> 
    </li> 
    <li> 
     <span><img src="images/logos/first_small.png"><a href="#">Module Conso/Gene</a></span> 
    </li> 
</ul>

我希望你能有所幫助。 :)

來源

2011-06-30 Timo

你能爲它創建一個小提琴？ http://jsfiddle.net/ – BonyT

http://jsfiddle.net/GRfDT/是上面放置的HTML和CSS的實現（在下面添加了一些文本）。它似乎沒有做你所建議的（FF和IE），所以我假設你的樣式中缺少某些東西。在猜測中，我會說你在某處有一些位置樣式，因爲它們通常不應該與其他物體重疊... – Chris

我剛剛修改了\t jsfiddle.net/GRfDT你現在可以看到問題了。當我將鼠標放在「Bilan」上時，下拉菜單顯示與包含「SOME CONTENT」的div的合併。我希望div頂部被下拉部分隱藏。 – Timo

http://jsfiddle.net/chrisvenus/GRfDT/2/是你的修改和解決方案的小提琴。

我所做的首先是修改邊距以確保文本出現在正確的位置（即增加頂部邊距）。

然後我修改了該文本的z-index，將其放在菜單的後面。您也可以修改菜單的z-index，甚至可以將兩個z-index放在一起。

<div style="position: absolute; margin-top: 50px; z-index: -1"> SOME CONTENT </div>

z-index基本上就是爲了這個目的而設計的 - 確定內容從背景到前景的順序。有關它的更多信息，請參閱http://www.w3.org/TR/CSS2/visuren.html#propdef-z-index

另外我還要注意，儘管在您的問題得到充分解釋之前回復，但您應該使菜單絕對是絕對的，而不是遵循它的內容。主要是因爲我懷疑這將意味着更整潔的HTML整體，因爲它會阻止你必須擁有一個包含所有其他內容的容器，或者製作比您想要的更多的東西，或者最糟糕的情況是讓每個節點都考慮到它，有關或以其他方式你absoluted文本疊加...

是這樣的：http://jsfiddle.net/chrisvenus/GRfDT/3/（和以前一樣，但是用在哪裏的位置互換的一些：絕對是）

來源

2011-06-30 09:27:02 Chris

非常感謝，它效果很棒！ – Timo

@Timo：我剛剛編輯了一下我的答案，最後注意到了你對絕對定位的使用（靈感來自@ kinakuta的回答）。你可能想檢查一下，以確保你沒有任何未來的問題。當然，它可能取決於你的頁面結構的其餘部分...... :) – Chris

我看到的主要問題是，當你的菜單「顯示」它推動下面的東西。你想設置的嵌套列表絕對的位置，從頁面的流量將其刪除：

#menu li ul { position: absolute; }

這將使菜單出現在文本/內容，而不是推下來的。

還有一件事 - 你會想添加一些定位到相同的ul - 左0;和頂部25px; （或在那裏，以適應你想要它看起來如何）。

來源

2011-06-30 09:22:07 kinakuta

下拉菜單不應該是透明的

回答

相關問題