横向导航栏（jQuery的）

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>

..它将程序Show Subnav（如果存在）上的鼠标悬停。

我知道伟大的超能鱼插件，但我想保持它在这里很简单，如果可能的。

不使用任何插件

非常感谢！

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下拉菜单中的链接。为什么使用JavaScript时，它可以很容易地以纯的醇” CSS做什么？

修改

抱歉这里是链接： http://www.cssplay.co.uk /menus/final_drop.html

我刚在Firefox 3.5，Safari浏览器4，IE8和Chrome 3测试这一点，它在所有这些工作得很好。