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

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