Css 如何创建出现在悬停菜单上的菜单？

我有一个我创建的菜单，我想出现在一个图像的悬停上方。我如何编写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>

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

CSS

选中此项：

但是，当您移除图像的鼠标时，列表将再次隐藏，为了保持它在那里，我认为您需要使用Javascript/JQuery

JQuery

Javascript

CSS

选中此项：

但是，当您移除图像的鼠标时，列表将再次隐藏，为了保持它在那里，我认为您需要使用Javascript/JQuery

JQuery

Javascript

只要optionsMenuTree和options是兄弟，您就不需要javascript，可以使用

#options {
    display: none;
}

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

请参阅更新的

，只要选项菜单和选项是同级的，您就不需要javascript，可以使用

#options {
    display: none;
}

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

---

请参见更新的

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

---

uloptions ul{display:none；}uloptions ul li:hover>ul{display:block；}

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

---

---

uloptions ul{display:none；}uloptions ul li:hover>ul{display:block；}

值得一提的是，只有当options是options menutreeparent元素的子元素，并且图像放在menuThey之前时，它才会起作用。它们是不相关的，而且距离很远apart@Christo哦，所以你应该在你的问题中提到它。现在答案很清楚了-你们什么也做不了，使用javascript。@AliBassam编辑了你们的jquery部分，我希望你们在这方面还可以it@PeterSzymkowski没关系，实际上你需要问Christo，如果他移除鼠标，他是否想隐藏列表。最好提一下，只有当options是optionsMenuTreeparent元素的子元素时，它才会起作用，图像放在menuThey之前，它们是不相关的，而且相当远apart@Christo哦，所以你应该在你的问题中提到它。现在答案很清楚了-你们什么也做不了，使用javascript。@AliBassam编辑了你们的jquery部分，我希望你们在这方面还可以it@PeterSzymkowski没关系，实际上你需要问克里斯托，如果他移除鼠标，他是否想隐藏列表。请看阿里回答下面的评论，他们（img和ul）是不相关的，而且相距很远。图像在哪里@彼得斯·科夫斯基：你的意思是这样吗？看看阿里的回答和第一句话：~离+不远。仍然菜单+图像处理是不相关的，而且相距甚远apart@PeterSzymkowski相隔很远并不重要。虽然不相关意味着他们不是兄弟姐妹，但这是行不通的。参见阿里回答下面的评论，他们（img和ul）是不相关的，而且相距很远。图像在哪里@彼得斯·科夫斯基：你的意思是这样吗？看看阿里的回答和第一句话：~离+不远。仍然菜单+图像处理是不相关的，而且相距甚远apart@PeterSzymkowski相隔很远并不重要。尽管不相关意味着他们不是兄弟姐妹，但这不起作用。请参阅我的更新答案，了解仅CSS的解决方案。请参阅我的更新答案，了解仅CSS的解决方案。

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

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

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

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

#options {
    display: none;
}

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