نافبر أفقي (مسج)

Question

أرغب في إنشاء نافذة أفقي بسيط للغاية يعتمد على HTML التالي:

<div id="nav">
    <ol class="clear">
        <li><a href="#">Parent 1</a></li>
        <li><a href="#">Parent 2</a>
            <ul class="clear">
                <li><a href="#">Child 1</a></li>
                <li><a href="#">Child 2</a></li>
                <li><a href="#">Child 3</a></li>
            </ul>   
        </li>
        <li><a href="#">Parent 3</a></li>
     </ol>
</div>

.. انها تظهر الفرعية (موجودة) على الماوس.

أعرف عن البرنامج المساعد رائع Superfish، ولكن أود أن أبقيه بسيطا حقا هنا ولا يستخدم أي إضافات إن أمكن.

تشكرات!

Answer 1

هذا يجب أن تبدأ في الاتجاه الصحيح

$(document).ready(function() {
    $("div#nav > ol.clear > li > ul").hide();
    $("div#nav > ol.clear > li:has(> ul)").hover(function() {
        var x = $(this);
        x.children("ul").eq(0).css({'top':x.position().top + x.height()+5, 'left':x.position().left-37}).show();
    }, function () {
        $(this).children("ul").eq(0).hide();
    });
});

<style type="text/css" media="screen">
ol > li { display:inline; margin: 2px}
ul { position:absolute }
ul > li { display:inline }
ul > li > a { yellow; display:block }
</style>

تحقق من هذا الموقع للتجريبي http://jsbin.com/ejuxa.

Answer 2

إذا كنت لا ترغب في استخدام أي إضافات، فلماذا لا تفعل ذلك فقط مع CSS؟ هنا هو رابط إلى القائمة المنسدلة "النهائية" CSS. لماذا استخدام جافا سكريبت عندما يمكن القيام به بسهولة في CSS OL عادي؟

تعديل

آسف هنا هو الرابط: http://www.cssplay.co.uk/menus/final_drop.html.

لقد اختبرت هذا فقط في Firefox 3.5، Safari 4، IE8، و Chrome 3، وعمل بشكل جيد في كل منهم.