0

ドロップダウン メニューを作成しましたが、それと共にドロップダウンする背景が必要です。これが私のコードの一部です：

HTML:

<div id="background"></div>

CSS:

div#background{
height: 150px;
background-color: white;
display: none; }

ul#navmenu li:hover div#background
{
    display: block;
}

(このコードには何か問題があることはわかっています。これは、これまでインターネットから拾ってきたものです...) li は、メニューを構成するリスト項目です。

HTML コードでは、「背景」の仕切りは、ドロップダウン メニューを含む別の仕切りの内側と最後にあります。

<div id="menu">
<ul id="navmenu"></ul>
<div id="background"></div>
</div>

ul は、メニューを含む順序付けられていないリストです。

私が欲しいのは、背景とともにメニューをドロップダウンさせることです。背景は、メニューの直後にあるテキストを覆う (上にある) 必要があります。(メニューはテキストにドロップされます)。

もう少し分かりやすくするために写真を投稿したかったのですが、まだ十分な評判ポイントがありません...申し訳ありません:S

可能であれば、css のみを使用して実行したいのですが、他のソリューションにも対応しています。何か案は？

4

1 に答える 1

0

あなたのCSSはliの子用です

CSS のこの html コード

<div id="menu">
<ul id="navmenu"><li><div id="background"></div></li></ul>
</div>

HTML の背景は navmenu の兄弟です。

navmenu にカーソルを合わせたときに背景を表示するための HTML の CSS コードです。

<style>
div#background{
height: 150px;
background-color: white;
display: none; }

ul#navmenu:hover +div#background
{
    display: block;
}
</style>

LI からそれを行いたい場合は、親の兄弟セレクターが必要になります。私はそれを持っていませんが、欲しいのですが、jQuery でうまくいく可能性があります。

Adjacent Sibling (+) コンビネータは、Internet Explorer 7 plus で使用でき、CSS 2.1 標準です。

li ブロック内以外の場所に背景が必要であると仮定すると、それを表示したい領域に対して position:relative にします。

于 2013-10-29T21:56:51.093 に答える