Question

I have a menu I created that I would like to appear on hover over of an image. How do I write the css to create that? This is my menu:

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

I would like it to stay hidden and only appear when I hover over the following image:

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

I think I need to do something like this:

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

But I cannot get it to work right. Any help?

Answer 1

CSS

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

Check this : http://jsfiddle.net/AliBassam/S9cdE/

However, when you remove the mouse of the image, the list will be hidden again, to keep it there, I think you need to use Javascript/JQuery.

JQuery

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

Javascript

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

Then:

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