Question

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

因此，把它愚蠢到一个小小的假人，基本上是COPIED在文章中说的那些帮我拿出菜单的东西，不知何故它仍然不起作用，我无法弄清楚为什么。

有人可以向我解释我在假人中做错了什么，所以我可以在尝试修复预定的菜单时使用它作为一个例子吗？

Article with the dropdown code（去那个说基本代码的部分，看上去还离我太远了）

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 dummy：

/* 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 dummy：

$(function () {

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

Answer 1

您尚未包含jquery库。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>

为什么这个Webdesigndev文章的下拉菜单不起作用？

1 个答案: