Question

any idea what am I missing at the link: ** http://jsfiddle.net/AnUZ7/2/ **

I’m trying to make a dropdown like at Zerply

<a href="#" class="setting">Setting</a>

<ul>
    <li><a href="#">Lorem</a></li>
    <li><a href="#">Ipsum</a></li>
</ul>

css here:

ul {
    position: absolute;
    background: orange;
    width: 10em;
    left: -999em; 
}

a.setting:hover ul {
    left: auto;
}

Thanks!

Answer 1

Try replacing a.setting:hover ul {...} to

a.setting:hover + ul,
ul.submenu:hover {...}

Edited fiddle:
http://jsfiddle.net/AnUZ7/4/

The .first + .second selector selects the next element after .first.
The .first ~ .after-first selector select all elements after .first.
These selectors are not working on Internet Explorer 6, but hopefully that is not a big problem in 2011.

Beware the (possible) margin/padding/other gaps between the a and its ul in your actual design! If the mouse pointer falls between them, the menu will disappear.