ドロップダウンメニューは透明ではありません

Question

私は単純なドロップダウンメニューを持っています。 メニューの下に他の要素を追加すると（たとえば、テキストのように）、ドロップダウンメニューが表示されていても表示されます。ドロップダウンメニューは、その下にあるコンテンツと何らかの形でマージされ、醜い重なったコンテンツが作成されます。私はあなたが役立つことを願っ

<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> 

：

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です：

は、ここに私のCSSです。 :)

Answer 1

http://jsfiddle.net/chrisvenus/GRfDT/2/は、あなたの修正と解決策ではありません。

最初に、テキストが適切な場所に表示されていることを確認するための余白が変更されました。

次に、そのテキストのZ-インデックスを変更してメニューの内容の後ろに置いていました。また、メニューのz-インデックスを変更することもできますし、両方にz-インデックスを付けることもベストプラクティスです。

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

Zインデックスは、基本的には、まさにこの目的のために設計されて - コンテンツがバックグラウンドからフォアグラウンドにある注文何かを決定します。それについての詳細は、http://www.w3.org/TR/CSS2/visuren.html#propdef-z-index

も参照してください。あなたの問題の前に返信しても、kinakutaは、あなたがおそらくメニューを次のコンテンツではなく絶対にするべきであるという事実については正しくあります。主に、それはあなたが他のすべてのコンテンツを持つコンテナを持つか、またはあなたが望むものよりも絶対的なものを絶対に作ることをやめなければならないので、このような

何か...程度あるいは他の方法でごabsolutedテキストでオーバーレイ：http://jsfiddle.net/chrisvenus/GRfDT/3/（前しかし、位置場所についてのいくつかのスワップと同じ：絶対です）

Answer 2

私が見る主な問題は、メニューが表示されているときに、その下にあるものを押し下げていることです。あなたは、ページの流れからそれを削除するには、絶対にネストされたリストの位置を設定する：

#menu li ul { position: absolute; } 

これはメニューには、それを押し下げるのではなく、テキスト/コンテンツ上に表示されるようになります。

さらにもう1つ - 同じul - left 0に位置を追加する必要があります。上位25ピクセル。 （あなたの見た目に合わせるためにそこに何かを置いてください）