0

我想基于以下 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 插件，但我想在这里保持简单，如果可能的话不要使用任何插件。

非常感谢！

4

2 回答 2

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

于 2009-12-10T14:42:46.170 回答
0

如果你不想使用任何插件，为什么不直接使用 CSS 呢？这是“终极”CSS 下拉菜单的链接。既然可以用普通的 CSS 轻松完成，为什么还要使用 javascript？

编辑

对不起，这里是链接：http ://www.cssplay.co.uk/menus/final_drop.html

我刚刚在 Firefox 3.5、Safari 4、IE8 和 Chrome 3 中对此进行了测试，并且在所有这些版本中都运行良好。

于 2009-12-10T14:31:17.360 回答