-1

嘿，在我的上一个主题中，我犯了一个错误，没有将 css 和 Jquery 放入其中。所以我在 CodePen 中添加了更多内容并构建了一个菜单。

现在我遇到的问题是它仍然不起作用。我搜索但找不到它，所以我把它放在这里。

http://codepen.io/anon/pen/djwih

HTML 很好，css 没有，我几乎可以肯定 jquery 很好。有人可以帮我检查一下并纠正我的错误吗？

在顶部，我在左侧有一个徽标，菜单必须在右侧。该菜单在正确的 html 中具有 1200 像素的宽度，并且是 margin:0 auto;。但是徽标与菜单的高度相同，所以这就是我放置#menu ul float:right; 的原因。

在此先感谢您的帮助！！

4

1 回答 1

1

首先，您的 jQuery 中有几个拼写错误：

$function() { 
$(this).find('ul').fadeOut('fast');
}));;

$从前面删除function

function() {

并在中间添加一个缺失}的))并删除额外的;

})});

接下来，我们应该用类对顶级菜单项进行toplevel分类，并相应地调整 CSS/jQuery。

HTML：

<li class="toplevel"><a href="index.php">Home</a>
<li class="toplevel"><a href="#">Who are we</a>
<li class="toplevel"><a href="#">Contact</a></li>


此外，将margin-left子ul元素的 设置为-40px（用于间距）
CSS：

#menu li.toplevel {
display:inline-block;
padding:8px 12px;
list-style:none;
}

和

#menu ul li ul {
display:block; 
position:absolute;
margin-left:-40px;
}

jQuery：

$(document).ready(
function() {
    $('#menu ul li ul').hide();
    $('#menu ul li').hover( 
        function() {
            $(this).find('ul:first').fadeIn('slow');
        },
        function() { 
            $(this).find('ul').fadeOut('fast');
        }
    )
}
);

这是一个有效的 jsFiddle，您的代码已清理完毕：http: //jsfiddle.net/9CBs2/1/

一切似乎都按照您的预期进行。确保使用 JavaScript 调试器或工具来检查语法错误。

于 2013-09-14T19:16:18.783 回答