How to make a CSS rule which applied on a div affect another div?

Question

Is it possible to make the following in CSS:

#subMenue {
//this rule apply to a div with an id of "subMenue"
height: auto;
width: 113px;
position: absolute;
background-color: #B3B3B3;
visibility: hidden;
}
#menueLink:hover {
//this rule apply to another div with an id of "menueLink"
//make the div that is effected by *#subMenue* rule change its visibility to *visible*
}

I'm trying to make basic sub-menu with CSS only without using JavaScript with minimum complications.

Answer 1

That is not possible in CSS. You'll have to apply :hover to #subMenue itself (which is obviously not what you need in this scenario, plus it's pointless anyway since #subMenue is hidden so you can't technically hover over it) or use JavaScript.

Answer 2

yes perhaps something like this:

#subMenue #menueLink {
visibility: hidden;
}


#subMenue:hover #menueLink {
visibility: visible;
}

Answer 3

If #submenue is child of submenue you can create a rule:

#menueLink:hover #submenue {
    visibility:visible;
}

note that on IE7 and below, only anchors can use the pseudoselector :hover.

Answer 4

You cannot do as you want with CSS. That said, you can use the below for a pure CSS menu:

HTML:

<ul id="nav">
    <li>
        <a href="">Main Item 1</a>
        <ul>
            <li>Sub item 1</li>
            <li>Sub item 1</li>
        </ul>
    </li>
</ul>

CSS:

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

You can adjust as necessary for absolutely positioned submenus

Answer 5

The answer from K Prime is really the answer, but here is his approach altered to use absolute positioning like you wanted:

#nav > li ul {
    display: none;
}
#nav > li:hover ul {
    height: auto;
    width: 113px;
    position: absolute;
    background-color: #B3B3B3;
    display: block;
}