css - 如何创建悬停时显示的菜单？

Question

我有一个我创建的菜单，我希望将鼠标悬停在图像上。我如何编写 css 来创建它？这是我的菜单：

<ul id="options" class="optionsMenu">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E
        <ul>
            <li>E1</li>
            <li>E2</li>
            <li>E3</li>
            <li>E4</li>
        </ul>
    </li>
    <li>F</li>
    <li>G</li>
   </ul>

我希望它保持隐藏状态，仅当我将鼠标悬停在以下图像上时才会出现：

<img src='...image.png' alt='Options Menu' id="optionsMenuTree"/>

我想我需要做这样的事情：

#options ul.optionsMenu ul{
    display: none;
    visibility: none;
}
#optionsMenuTree:hover > ul {
    display: block;
}

但我无法让它正常工作。有什么帮助吗？

Answer 1

只要optionsMenuTree和options是兄弟姐妹，你就不需要javascript并且可以使用

#options {
    display: none;
}

#optionsMenuTree:hover ~ #options {
    display: block;
}

查看更新的 JSFiddle

Answer 2

CSS

#options{
    display: none;
}
#optionsMenuTree:hover + #options {
    display: block;
}

检查这个：http: //jsfiddle.net/AliBassam/S9cdE/

但是，当您移开图像的鼠标时，列表将再次隐藏，要保留它，我认为您需要使用 Javascript/JQuery。

jQuery

$("#optionsMenuTree").hover(function(){    
    $("#options").show();
}, function(){
    $("#options").hide();
});

Javascript

<img onmouseover="ShowList()" onmouseout="HideList()"/>

然后：

function ShowList()
{
    document.getElementById("options").style.display="block";
}
function HideList()
{
    document.getElementById("options").style.display="none";
}

Answer 3

首先，您必须隐藏子菜单列表项。然后必须在悬停或主链接上显示..

ul#options ul {display: none;} ul#options ul li:hover > ul { display: block; }