Question

Short ans sweet: Why does :hover does not display the hidden content? I’ve tried everything, from display: block: to #trigger a:hover.

Here is the testcase: http://jsfiddle.net/5egvV/

Answer 1

Two problems:

1. Wrong CSS selector

You have:

#trigger:hover ul ul {

It should be:

#trigger:hover ul {

2. Wrong HTML

You have:

<li id="trigger"><a href="#" title="#">Mainitem 1</a></li>
    <ul>
        <li><a href="#">Subitem 1</a></li>
        <li><a href="#">Subitem 2</a></li>
        <li><a href="#">Subitem 3</a></li>
    </ul>

It should be:

<li id="trigger"><a href="#" title="#">Mainitem 1</a>
    <ul>
        <li><a href="#">Subitem 1</a></li>
        <li><a href="#">Subitem 2</a></li>
        <li><a href="#">Subitem 3</a></li>
    </ul>
</li>

<ul> should go into <li>