html - css を使用してリストを非表示にし、マウスが上のリストにあるときに表示するにはどうすればよいですか?

Question

私はこのメニューを持っています：

home
Pictures
Picture 1
Picture 2
Sounds
Videos

マウスを上に移動したとき以外は非表示Picture 1にしたいPicture 2"Pictures"

Answer 1

ここでは JavaScript を使用する必要があります。CSS 自体にはロジックがありません。ピクチャ 1 とピクチャ 2 の表示プロパティを none に設定し、マウスがピクチャの上にあるときに javascript でブロックするように設定します。PrototypeJS を使用すると、次のようなことができます

$("pictures").observe("mouseover", function(){ $("Picture 1").setStyle({display: "block"}) } )
$("pictures").observe("mouseout", function(){ $("Picture 1").setStyle({display: "none"}) } )

Answer 2

あなたの質問には明らかに情報が不足しているため、その質問に対する私自身のコメントにもかかわらず、私はあなたの HTML を推測し、ulリストを含む要素を使用していると仮定します。

<ul>
    <li>home</li>
    <li>Pictures
        <ul>
            <li>Picture 1</li>
            <li>Picture 2</li>
        </ul></li>
    <li>Sounds</li>
    <li>Videos</li>
</ul>​

その場合は、次の CSS をお勧めします。

ul ul {
    display: none;
}

ul li:hover ul {
    display: block;
}​

JS フィドルのデモ。

ある種のメニュー構造を作成しようとしていると思われるので (これもまた、情報の不足に基づく大げさな推測です)、上記の CSS を更新して、フライアウト スタイルの CSS メニューを示します。

ul {
    /* adjust to taste */
    width: 6em;
}

ul ul {
    display: none;
    /* to more easily show the connection between the parent li and child ul
       adjust to taste, of course */
    background-color: inherit;
}

li {
    /* to position the child ul element relative to its parent */
    position: relative;
}

li:hover {
    /* just to identify which li element is currently hovered */
    background-color: #ffa;
}

li li:hover,
li:hover li:hover {
    /* so the hovered li is differentiated from its parent ul's background
       and the background of its grandparent li. Adjust to taste */
    background-color: #dda;
}

ul li:hover ul {
    /* so that it's visible on the page */
    display: block;
    position: absolute;
    /* to be level with its parents top-edge */
    top: 0;
    /* so that the li appears on the right of the parent li */
    left: 100%;
}​

JS フィドルのデモ。