-1

我正在处理下拉菜单。没什么花哨的，只是 HTML、CSS 和 jQuery 的简单组合。我找到了一个很好的例子，但是当我试图在我自己的网站上实现它时，我不知何故无法让它工作。

因此，将其简化为一个小傻瓜，基本上复制了文章中所说的帮助我解决菜单的内容，但不知何故它仍然不起作用，我不知道为什么。

有人可以向我解释我在假人中做错了什么，所以我可以在尝试修复预期菜单时以此为例？

带有下拉代码的文章（去说基本代码的部分，幻想离我还太远）

HTML假人：

<!DOCTYPE html>
<head>
<link rel="stylesheet" title="nzoom" type="text/css" href="opmaak_home.css"> 
</head>
<body>
<ul class="tabs">
    <li><a href="#">Dropdown 1</a>
        <ul class="dropdown">
            <li><a href="#">Menu item 1</a>
                <ul class="dropdown">
                    <li><a href="#">Submenu item 1</a></li>
                    <li><a href="#">Submenu item 1</a></li>
                    <li><a href="#">Submenu item 1</a></li>
                </ul>
            </li>
            <li><a href="#">Menu item 2</a></li>
            <li><a href="#">Menu item 3</a></li>
            <li><a href="#">Menu item 4</a></li>
            <li><a href="#">Menu item 5</a></li>
            <li><a href="#">Menu item 6</a></li>
        </ul>
    </li>
    <li><a href="#">Dropdown 2</a>
        <ul class="dropdown">
            <li><a href="#">Menu item 1</a></li>
            <li><a href="#">Menu item 2</a></li>
            <li><a href="#">Menu item 3</a></li>
            <li><a href="#">Menu item 4</a></li>
            <li><a href="#">Menu item 5</a></li>
            <li><a href="#">Menu item 6</a></li>
        </ul>
    </li>
    <li><a href="#">Dropdown 3</a>
        <ul class="dropdown">
            <li><a href="#">Menu item 1</a></li>
            <li><a href="#">Menu item 2</a></li>
            <li><a href="#">Menu item 3</a></li>
            <li><a href="#">Menu item 4</a></li>
            <li><a href="#">Menu item 5</a></li>
            <li><a href="#">Menu item 6</a></li>
        </ul>
    </li>
</ul>
<script type="text/javascript" src="menu.js"></script>
</body>

.css 假人：

/* tabs
*************************/

ul.tabs
{
display: table;
margin: 0;
padding: 0;
list-style: none;
position: relative;
}

ul.tabs li
{
margin: 0;
padding: 0;
list-style: none;
display: table-cell;
float: left;
position: relative;
}

ul.tabs a
{
position: relative;
display: block;
}

/* dropdowns
*************************/

ul.dropdown
{
margin: 0;
padding: 0;
display: block;
position: absolute;
z-index: 999;
top: 100%;
width: 250px;
display: none;
left: 0;
}

ul.dropdown ul.dropdown
{
top: 0;
left: 95%;
}

ul.dropdown li
{
margin: 0;
padding: 0;
float: none;
position: relative;
list-style: none;
display: block;
}

ul.dropdown li a
{
display: block;
}

jQuery假人：

$(function () {

    $('.dropdown').each(function () {
        $(this).parent().eq(0).hover(function () {
            $('.dropdown:eq(0)', this).show();
        }, function () {
            $('.dropdown:eq(0)', this).hide();
        });
    });
});
4

1 回答 1

2

您还没有包含 jquery 库。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
于 2013-06-25T22:01:29.597 回答