Visibility değerini kapatınca div görünmez bildiğiniz gibi. Bahsettiğim oydu. Aynı şekilde her hangi bir etkileşim ile o divin visibility değerini aktif edip yoktan var edebilirsiniz.

Amacım çok bilmişlik yapmak değil. Sadece arkadaşın bahsettiği olayın CSS ile yapılabileceğinden bahsediyorum. Tabii ki oturup burada şöyle yapılır diye satır satır kod yazmayacağım. Fakat an bu tarz hover işlemleri CSS ile çocuk oyuncağı. Yok CSS ile işin içinden çıkamıyorsanız "document.getElementById('idno').style.display = 'none';"" gibi bir kod satırıyla divleri etkileşime sokarsınız.

Gerçi before-after fazlasıyla yeterli.

Tam istediğin gibi örnek yok elimde ne yazık ki.

Ama sıradan bir dropdownda li lere genellikle margin verilir ve onun bağlantılı olduğu alandan uzaklaştılır. Senin yapacağı kodda ise margin değeri olmayacak. Üzerine gelinen veya tıklanan objenin detayı direkt olarak üzerine çıkacak.

http://demos.pixelworkshop.fr/css3_mega_menu/

Ek Olarak: Aşağıda JS kullanmadan CSS ile etki tepki yapılmış bir örnek var.

Çıkış mantığın aynı.

http://codepen.io/petebot/pen/icyuE